I am trying to download image through web scrapping through gui, whenever i run script images are downloaded but gui window doesnt respond and keep loading and after all images are downloaded it gets its control back plus my search button completely get frozen once i click it and it start to download images
index.py
from PyQt6.QtWidgets import (
QApplication,
QWidget,
QMainWindow,
QLineEdit,
QVBoxLayout,
QHBoxLayout,
QPushButton,
QGridLayout,
QLabel
)
from PyQt6.QtCore import Qt
from PyQt6.QtGui import QCursor
import sys
from IMD import Parser
from pathlib import Path
import os
os.chdir("./images")
class ImageDownloaderWindow(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("Layout")
self.window = QWidget()
self.layout = QVBoxLayout()
self.layout.setAlignment(Qt.AlignmentFlag.AlignTop)
self.window.setLayout(self.layout)
self.setFixedSize(550, 500)
self.setCentralWidget(self.window)
self.createText("Image Downloader", self.layout, """
margin: 80px 20px 10px 20px;
font-size: 40px;
font-family: monospace;
font-weight: bold;
""")
self.createText("Download Images of your choice", self.layout, """
margin-bottom: 80px;
font-size: 20px;
font-family: 'Eras Bold ITC';
""")
self.name = ""
self.createSearchBar()
self.createSearchButton()
self.searchClickEvent()
def createText(self, text, layout, stylesheet=None):
self.display = QLabel(text)
self.display.setStyleSheet(stylesheet)
self.display.setAlignment(Qt.AlignmentFlag.AlignHCenter)
layout.addWidget(self.display)
def createSearchBar(self):
self.searchBar = QLineEdit()
# self.searchBar.setStyleSheet("margin: 0px 50px; color: #fff;")
self.searchBar.setAlignment(Qt.AlignmentFlag.AlignCenter)
self.layout.addWidget(self.searchBar)
def createSearchButton(self):
self.searchButton = QPushButton("Search")
self.searchButton.setFixedSize(140, 60)
self.searchButton.setCursor(QCursor(Qt.CursorShape.PointingHandCursor))
self.layout.addWidget(self.searchButton, alignment=Qt.AlignmentFlag.AlignCenter)
def displayImageName(self):
return self.searchBar.text()
def searchClickEvent(self):
self.searchButton.clicked.connect(self.parsedImages)
def parsedImages(self):
self.name = self.displayImageName()
parser = Parser("https://unsplash.com/s/photos/"+self.name)
Path(self.name).mkdir(exist_ok=True)
parser.getSources()
os.chdir(self.name)
imgsLen = len(os.listdir())
images = parser.srcs
for index, img in enumerate(images):
with open(self.name+str(index)+'.jpg', "wb") as f:
f.write(parser.getContent(img))
def main():
app = QApplication([])
app.setStyleSheet(
"""
QWidget {
color: #fff;
background-color: #123;
}
QLineEdit {
color: #000;
padding: 10px;
border: 1px solid #000;
border-radius: 10px;
background-color: #fff;
margin: 0px 50px;
font-size: 15pt;
}
QPushButton {
background-color: #00a656;
margin-top: 10px;
padding: 250px;
border: 1px solid #00a656;
border-radius: 10px;
font-size: 23px;
font-weight: bold;
letter-spacing: 3px;
}
QPushButton:hover {
cursor: pointer;
background-color: #000;
color: #fff;
}
"""
)
ui = ImageDownloaderWindow()
ui.show()
sys.exit(app.exec())
if __name__ == "__main__":
main()
also i have made my own parser class to get image of content
#parser.py
import requests
from bs4 import BeautifulSoup
from pathlib import Path
import os
class Parser:
def __init__(self, site):
self.site = site
self.srcs = []
def parse_content(self):
soup = None
try:
response = requests.get(self.site)
soup = BeautifulSoup(response.content, "html.parser")
except Exception as error:
soup = None
print(error)
finally:
return soup
def getSources(self):
siteContent = self.parse_content()
if siteContent:
imgElements = siteContent.find_all("img", class_="YVj9w")
for img in imgElements:
self.srcs.append(img.get("src"))
return True
return False
def getContent(self, img):
response = requests.get(img)
return response.content
how should i make my gui window and betton working when it is downloading image. I quit tkinter because i faced same issue there and i thought there was problem with tkinter but now i knew gui behaves in such way and it may have some solution.
Related
I want to keep the selected text keep the blue background color,but when i right clicked the text to generate a menu,the selected text will turn gray.how should i do.
when i clicked the qlabel text to make it selected,the result is like this picture.
And when i right click the selected text,the blue color turn gray.
here is my demo code.
import pyperclip
import sys
from PySide2.QtCore import Qt
from PySide2.QtGui import QCursor
from PySide2.QtWidgets import QLabel,QMenu,QAction,QHBoxLayout,QApplication,QWidget
class moreInfoLabel(QLabel):
def __init__(self, *args, **kw):
super().__init__(*args, **kw)
self.setTextInteractionFlags(Qt.TextSelectableByMouse)
self.setContextMenuPolicy(Qt.CustomContextMenu)
self.customContextMenuRequested.connect(self.rightMenuShow)#开放右键策略
self.setStyleSheet('''
QMenu {
border: Opx;
font-size: 9pt;
width:100px;
background-color:white
}
QMenu::item {
width:160px;
font-family: "Microsoft YaHei";
border: 0px;
min-height: 15px;
max-height: 26px;
padding:10px 15px 10px 15px;
font-size: 9pt;
}
QMenu::item:selected {
background-color: #f9f9f9;
}
QLabel{
font-size:13px;
font-family:微软雅黑;
}
''')
def rightMenuShow(self, pos):
print(self)
menu = QMenu(self)
menu.addAction(QAction('复制', menu))
menu.addAction(QAction('全选', menu))
menu.triggered.connect(self.menuSlot)
menu.exec_(QCursor.pos())
self.setStyleSheet('''
QMenu {
border: Opx;
font-size: 9pt;
width:100px;
background-color:white
}
QMenu::item {
width:160px;
font-family: "Microsoft YaHei";
border: 0px;
min-height: 15px;
max-height: 26px;
padding:10px 15px 10px 15px;
font-size: 9pt;
}
QMenu::item:selected {
background-color: #f9f9f9;
}
QLabel{
font-size:13px;
font-family:微软雅黑;
background-color: #f9f9f9;
}
''')
def menuSlot(self, act):
if act.text() == '复制':
pyperclip.copy(self.selectedText())
elif act.text() == '全选':
len1 = len(self.text())
self.setSelection(0,len1)
self.selectedText = self.text
class Demo(QWidget):
def __init__(self):
super(Demo, self).__init__()
self.moreinfo = moreInfoLabel("YOUJIAN")
self.layout = QHBoxLayout()
self.layout.addWidget(self.moreinfo)
self.setLayout(self.layout)
if __name__ == "__main__":
app = QApplication()
demo = Demo()
demo.show()
sys.exit(app.exec_())
Is there any way to solve this problem
When the menu is shown, the widget uses the Inactive color group of the palette, which is the one normally used when the widget is in a window that is not active.
The simple solution is to temporarily replace the Highlight and HighlightedText color role for that group and restore the original palette afterwards. This step is necessary for consistency, as the default Inactive colors should be kept in case the window is actually unfocused.
Note that in the following example I did some changes:
the custom context menu signal is normally used when managing the menu from another object, like its parent, but when it's actions have results in the same class it's better to use the contextMenuEvent() handler;
it's better to check the menu result against the triggered QAction, not its text;
the pyperclip module is unnecessary as Qt already provides QClipboard;
do not overwrite self.selectedText with self.text, otherwise self.selectedText() will always return the full text of the label, even if there is no selection;
class MoreInfoLabel(QLabel):
_defaultPalette = None
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setTextInteractionFlags(Qt.TextSelectableByMouse|Qt.TextEditable)
self.setStyleSheet('''
QMenu {
border: Opx;
font-size: 9pt;
width:100px;
background-color:white
}
QMenu::item {
width:160px;
font-family: "Microsoft YaHei";
border: 0px;
min-height: 15px;
max-height: 26px;
padding:10px 15px 10px 15px;
font-size: 9pt;
}
QMenu::item:selected {
background-color: #f9f9f9;
}
QLabel{
font-size:13px;
font-family:微软雅黑;
}
''')
def contextMenuEvent(self, event):
oldPalette = self.palette()
tempPalette = self.palette()
tempPalette.setBrush(tempPalette.Inactive, tempPalette.Highlight,
oldPalette.highlight())
tempPalette.setBrush(tempPalette.Inactive, tempPalette.HighlightedText,
oldPalette.highlightedText())
self.setPalette(tempPalette)
menu = QMenu(self)
copyAction = menu.addAction('复制')
selectAction = menu.addAction('全选')
res = menu.exec_(event.globalPos())
self.setPalette(oldPalette)
if res == copyAction:
QApplication.clipboard().setText(self.selectedText())
elif res == selectAction:
self.setSelection(0, len(self.text()))
That said, QLabel already provides the menu entries you're trying to replace. If you did that for localization purposes, then overriding the default menu behavior is just wrong, as the problem is elsewhere.
I am sure it is possible to achieve what you are asking, however I would suggest a simpler alternative.
Instead of using a QLabel, It would be much simpler to achieve similar or identical behavior using a QLineEdit. You can set the line edit to read only and setFrame(False) to make it appear identical to a QLabel, with the added bonus that maintaining the current selection when opening a context menu is the default behavior for a QLine edit.
For example:
In the image below, the one on the right is the QLineEdit...
import pyperclip
import sys
from PySide2.QtCore import Qt
from PySide2.QtGui import QCursor
from PySide2.QtWidgets import QLabel,QMenu,QAction,QHBoxLayout,QApplication,QWidget, QLineEdit
QSS = ("""QMenu {
border: Opx;
font-size: 9pt;
width:100px;
background-color:white
}
QMenu::item:selected {
background-color: #f9f9f9;
}
QMenu::item {
width:160px;
font-family: "Microsoft YaHei";
border: 0px;
min-height: 15px;
max-height: 26px;
padding:10px 15px 10px 15px;
font-size: 9pt;
}
QLabel{
font-size:13px;
font-family:微软雅黑;
color: black;
background-color: #f9f9f9;
}""" # Added styles below to make it look identical to label
"""QLineEdit{
font-size:13px;
font-family:微软雅黑;
color: black;
background-color:#f9f9f9;
}""")
class Demo(QWidget):
def __init__(self):
super(Demo, self).__init__()
self.moreinfo = QLabel("YOUJIAN")
self.layout = QHBoxLayout()
self.layout.addWidget(self.moreinfo)
self.setLayout(self.layout)
self.moreinfo.setTextInteractionFlags(Qt.TextSelectableByMouse)
########################################
self.lineedit = QLineEdit(self) # <--- added these lines
self.layout.addWidget(self.lineedit)
self.lineedit.setText("YOUJAIN")
self.lineedit.setFrame(False)
self.lineedit.setReadOnly(True)
self.setStyleSheet(QSS)
if __name__ == "__main__":
app = QApplication()
demo = Demo()
demo.show()
sys.exit(app.exec_())
I'm new to next and I have been trying to make the game flappy bird. I used useEffect and styled components to animate the player(or bird) and pipes too. Basically when I run my app on chrome, it works fine but it flickers in safari. And after I play it a few times in safari it starts to work almost fine. For state management, I'm using redux.
Can someone help me to solve the problem and explain what is actually going on?
From what I think it is because of the re-rendering of the images but why is it working properly in chrome? And is there a better way to animate this?
This is my main code and I used the useEffect inside Bird and Pipes file to move them across the GameBox
import styled from 'styled-components'
import Pipes from './Pipes'
import { startGame, setBirdPosition, resetGame } from './features/app-slice'
import { store, constants } from './store'
import { useSelector } from 'react-redux'
import Bird from './Bird'
import { useEffect, useState } from 'react'
export default function GameBox() {
const [jumpAudio, setAudio] = useState(null)
useEffect(() => {
setAudio(new Audio('/sound-effects/jump.wav'))
// only run once on the first render on the client
}, [])
const birdPosition = useSelector((state) => state.birdPosition)
const score = useSelector((state) => state.score)
const gameStarted = useSelector(state => state.gameStarted)
const isGameOver = useSelector(state => state.isGameOver)
function jump() {
const JUMP = constants.JUMP
if (isGameOver) {
store.dispatch(resetGame())
return
}
else if (!gameStarted) {
// store.dispatch(resetGame())
store.dispatch(startGame())
}
else if (birdPosition - JUMP >= 0)
store.dispatch(setBirdPosition(-JUMP))
else store.dispatch(setBirdPosition(0))
jumpAudio.pause();
jumpAudio.currentTime = 0;
jumpAudio.play()
}
return (
<Box onClick={jump}>
{isGameOver ? <GameOver /> : null}
{gameStarted || isGameOver ? <Score>{score}</Score> : null}
{true ? <Bird /> : null}
<Pipes height={200} />
{!gameStarted && !isGameOver ? <GameStart /> : null}
{/* <Pipes height={200} position={props.width + 300} wh={props.height} /> */}
</Box>
)
}
const Box = styled.div`
user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none;
background: no-repeat center/100% url('/img/background-day.png');
overflow: hidden;
position: relative;
width: ${constants.WINDOW_WIDTH}px;
height: ${constants.WINDOW_HEIGHT}px
`
const GameStart = styled.div`
background: no-repeat center/70% url('/img/gamestart.png');
text-align: center;
width: 100%;
height: 100%;
`
const GameOver = styled.div`
position: relative;
z-index: 10;
background: no-repeat center/70% url('/img/gameover.png');
text-align: center;
width: 100%;
height: 100%;
`
const Score = styled.div`
font-family: 'Gamja Flower', cursive;
color: white;
text-shadow: black 2px 2px;
position: absolute;
font-size: 3rem;
z-index:1;
right: 10%;
top: 0;
`
I am using React JS + Typescript for my app. For styling I am using styled-components. I am really new in styled components. I have created one dropdown. The logic works fine but the UI looks horrible. I uploaded my code in Code sand box. I want design my Dropdown like Tailwind. But since I am new styled-components, I just don't know how to do that.
This is my dropdown component
import React, { useState } from "react";
import styled from "styled-components";
import Arrow from './Arrow.svg'
const Wrapper = styled.div<
{
active: boolean;
}
>`
text-align: left;
width: 100%;
color: #bfc5cd;
font-size: 16px;
font-weight: 300;
position: relative;
margin: 2em 0;
#media (min-width: 400px) {
max-width: 300px;
}
svg {
fill: #798697;
transition: all 0.2s ease;
}
${props =>
props.active
? `
svg {
transform: rotate(180deg);
}
`
: ``}
`;
const MenuLabel = styled.span`
display:inline-block;
color: grey;
border: 1px solid green;
background: white;
box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
cursor:pointer;
vertical-align:middle;
max-width: 100px;
padding: 40px 40px;
font-size: 12px;
text-align: center;
border: 1px solid ${({ theme }) => theme.inputBorderColor};
&:focus {
outline: none;
box-shadow: 0px 0px 0px 1px ${({ theme }) => theme.inputBorderColorActive};
border: 1px solid ${({ theme }) => theme.inputBorderColorActive};
}
`;
const ItemList = styled.div`
color: #798697;
background: white;
line-height: 30px;
padding: .25em 2em .25em 2em;
cursor: defaul;
user-select: none;
transition: all .25s ease;
&:hover,
&.selected {
background: #F7F7F7;
color: #4A4A4A;
}
`;
export interface IOptions {
label: string;
value: number;
}
export interface IDropdown {
labelDefault: string;
options: IOptions[];
}
const Dropdown = ({ labelDefault, options }: IDropdown) => {
const [isOpened, setIsOpened] = useState(false);
const [selectedOption, setSelectedOption] = useState("");
const [label, setLabel] = useState("");
const handleSelectedItem = (obj: any) => {
setSelectedOption(obj.value);
setLabel(obj.label);
setIsOpened(!isOpened);
};
return (
<Wrapper active={isOpened}>
<MenuLabel onClick={() => setIsOpened(!isOpened)}>
{selectedOption ? label : labelDefault}
</MenuLabel>
<ul
style={
isOpened
? {
display: "block",
listStyleType: "none"
}
: { display: "none" }
}
>
{options.map(el => (
<ItemList
key={el.value.toString()}
onClick={() => handleSelectedItem(el)}
>
{el.label}
</ItemList>
))}
</ul>
</Wrapper>
);
}
export default Dropdown;
This is the parent component
import * as React from "react";
import Dropdown from "./dropdown";
const MockData = [
{ label: "one", value: 1 },
{ label: "two", value: 2 },
{ label: "three", value: 3 }
];
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Dropdown labelDefault="Select a label" options={MockData} />
</div>
);
}
i got a "little" bug on my website. Here is the code im using:
product.tpl
{else}
href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"
data-fancybox-group="other-views"
class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"
global.css
.fancybox-skin {
background: #f4f5f7 !important; }
.fancybox-skin .fancybox-close {
width: 28px;
height: 28px;
background: none;
font-size: 28px;
line-height: 28px;
color: #333333;
text-align: center;
background: #f4f5f7!important;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.fancybox-skin .fancybox-close:hover {
color: #515151; }
.fancybox-skin .fancybox-close:after {
content: "\f057";
font-family: "FontAwesome"; }
Here is a Link to a product.
If you enlarge the picture by clicking on it, and hover to one of the sites and than jump to one of the other pictures you can see that the background is moving. In Internet Explorer it is working fine.
Now:
/* 1920x1200 ----------- */
#media only screen
and (min-width : 1681px) {
/* Styles */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.42857;
background: #f4f5f7 url('http://evoxity.net/themes/default-bootstrap/img/background/1920x1200.jpg');
margin: 0 ;
background-repeat: no-repeat scroll;
-moz-background-size:cover;
overflow: auto;
background-position:center 0;
}
}
How I can add solarized-dark colors to coderay ?
I'm thinking about tweaking the alpha.rb file, but not sure which css class definitions substitute with which color code.
Any better ideas ?
Maybe there exist some out of the box solution ?
Found also this but not sure how to make usage of it.
The results of what follows are very close to the look of solarized but not perfect. Basically, I used this this stylesheet for solarize and went through selector by selector and did my best to translate it into the styles used by Coderay.
Here is the original solarized example for ruby:
Here is the results I am able to produce with coderay:
SO: it's not perfect, but will get anyone that wants to use a Solarized-like 'theme' for Coderay on their way.
Here is what you need to do (for a Rails 3 app):
First you will need to override the module within the coderay gem that it uses to generate inline styles. Create a file called coderay.rb within config/initializers.
Next paste in the following into the config/intializers/coderay.rb file you've just created:
module CodeRay
module Styles
# A colorful theme using CSS 3 colors (with alpha channel).
class Alpha < Style
register_for :alpha
code_background = '#073642'
numbers_background = 'hsl(180,65%,90%)'
border_color = '#c0c0c0'
normal_color = '#d5f6f6'
CSS_MAIN_STYLES = <<-MAIN # :nodoc:
.CodeRay {
background-color:##073642;
border:1px solid #c0c0c0;
background: #002B36;
color:#eee8d5;
}
.CodeRay pre {
margin: 0px;
}
span.CodeRay { white-space: pre; border: 0px; padding: 2px; }
table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px; }
table.CodeRay td { padding: 2px 4px; vertical-align: top; }
.CodeRay .line-numbers {
background-color:#d5f6f6;
color:#808080;
text-align:right;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
.CodeRay .line-numbers a {
background-color:#d5f6f6;
color:#808080;
text-decoration:none
}
.CodeRay .line-numbers a:target { color:#00f !important; }
.CodeRay .line-numbers .highlighted { color: red !important; }
.CodeRay .line-numbers .highlighted a { color: red !important; }
.CodeRay span.line-numbers { padding: 0px 4px; }
.CodeRay .line { display: block; float: left; width: 100%; }
.CodeRay .code { width: 100%; }
MAIN
TOKEN_COLORS = <<-'TOKENS'
.debug{color:#fff;background:#00f}
.annotation{color:#586E75}
.attribute-name{color:#93A1A1}
.attribute-value{color:#93A1A1}
.binary{color:#509}
.char .content{color:#d20}
.char .delimiter{color:#710}
.char{color:#2AA198}
.class{color:#268BD2;font-weight:bold}
.class-variable{color:#268BD2}
.color{color:#eee8d5}
.comment{color:#586E75}
.comment .char{color:#859900}
.comment .delimiter{color:#859900}
.complex{color:#a08}
.constant{color:#B58900;font-weight:bold}
.decorator{color:#268BD2}
.definition{color:#099;font-weight:bold}
.delimiter{color:#000}
.directive{color:#088;font-weight:bold}
.doc{color:#93A1A1}
.doc-string{color:#93A1A1;font-weight:bold}
.doctype{color:#DC322F}
.entity{color:#CB4B16;font-weight:bold}
.error{color:#93A1A1;background-color:#faa}
.escape{color:#CB4B16}
.exception{color:#CB4B16;font-weight:bold}
.float{color:#2AA198}
.function{color:#268BD2;font-weight:bold}
.global-variable{color:#268BD2}
.hex{color:#2AA198}
.imaginary{color:#f00}
.include{color:#b44;font-weight:bold}
.inline{background-color:transparent;color:#93A1A1!important}
.inline-delimiter{font-weight:bold;color:#DC322F}
.instance-variable{color:#268BD2}
.integer{color:#2AA198}
.key .char{color:#DC322F}
.key .delimiter{color:#268BD2}
.key{color:#859900}
.keyword{color:#859900;font-weight:bold}
.label{color:#93A1A1;font-weight:bold}
.local-variable{color:#268BD2}
.namespace{color:#859900;font-weight:bold}
.octal{color:#2AA198}
.operator, .predefined{color:#859900;font-weight:bold}
.predefined-constant{color:#2AA198}
.predefined-type{color:#DC322F;font-weight:bold}
.preprocessor{color:#859900}
.pseudo-class{color:#859900;font-weight:bold}
.regexp .content{color:#2AA198}
.regexp .delimiter{color:#DC322F}
.regexp .modifier{color:#CB4B16}
.regexp{background-color:transparent}
.reserved{color:#268BD2;font-weight:bold}
.shell .content{color:#2b2}
.shell .delimiter{color:#161}
.shell{background-color:transparent}
.string .char{color:#2AA198}
.string .content{color:#2AA198}
.string .delimiter{color:#DC322F}
.string .modifier{color:#2AA198}
.string{background-color:transparent}
.symbol .content{color:#2AA198}
.symbol .delimiter{color:#2AA198}
.symbol{color:#2AA198}
.tag{color: #268BD2}
.type{color:#DC322F;font-weight:bold}
.value{color:#268BD2}
.variable{color:#268BD2}
.insert{background:transparent}
.delete{background:transparent}
.change{color:#CB4B16;background:transparent}
.head{color:#CB4B16;background:transparent}
.head .filename{color:#CB4B16}
.delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}
.insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}
.insert .insert{color:#CB4B16;background:transparent;font-weight:bold}
.delete .delete{color:##2AA198;background:transparent;font-weight:bold}
.change .change{color:#CB4B16}
.head .head{color:#CB4B16}
TOKENS
end
end
end
You'll also add the following CSS to your application (or, if you want, make a file in assets/stylesheets called coderay.css for it):
pre {
background: #002A35!important;
color: #93A1A1!important;
}
The above will set your code background to the dark background used by solarize and any code not annotated by codeway to the fallback color used in solarize.
Now just restart your app.
** Again, this isn't perfect and youll probably want to crack open that coderay.rb file again at some point and refine things. You can use this to help with that: http://jsfiddle.net/bradleygriffith/CNTw4/ **