jQuery.Syntax AddOn – Dark Theme / Titled Scroll List Layout
by Kristian Kraljic, July 7, 2011
I don’t think that I will be able to release stuff daily in future, but to get this blog started, lets see what we can do! As you might already saw, I am using a slightly modified version of Samuel G. D. Williams neat little jQuery.Syntax script to display source code in my blog. He uses jQuery and created a fast, lightweight and standard compliant syntax highlighter. A great piece of software.
To use his script in my blog, I had to adapt some smaller things first:
- At first I have made a new theme for the highlighter, which perfectly fits into dark layouts. You have either the possibility to generate your code using the new theme or to integrate it directly.
- The second thing is a new layout for the highlighter. It is an adapted version of the ‘list’ layout. It allows scrolling and has a title on top of the source viewer. These attributes can be specified (W3C compliant) separately for each source viewer.
Download Source: (Distributed under the Simplified BSD License)
For both enhancements you have two possibilities to install them in general. You can either use Ruby and the rakefile to generate a new version of the jQuery.Syntax scripts including the addons. Especially on a Windows computer this is quite hard to do, because the rakefile has to be adapted. Therefore I will describe the “inofficial” way aswell.
For the theme, this is quite an easy task to do. Simply download the bundle above, put the stylesheets of the theme somewhere and include them into the head section of your page or blog.
For the second enhancement, we have to cheat a little. At first download the layout-bundle above and put the .js and .css file into the jQuery.Syntax directory. Afterwards we have to change the jQuery.syntax() call to jQuery.syntax({blockLayout:’list_scroll’}) to use the new layout. If you are using the jQuery.Syntax AddOn for your blog, you have to change the jquery-syntax.php file of the plugin. Arround line 63, change the $.syntax call to $.syntax({root: ‘…’,blockLayout:’list_scroll’}) and you are all done. To use the enhancement you can now define your syntax include using the HTML attribute ‘title‘ and to enable scrolling the CSS attribute ‘max-height‘.
Here is an example what your <pre> tag might look like:
<pre title="{title}" class="syntax {brush}" style="max-height:{height}px">
Thats it. Two small enhacements to the jQuery.Syntax script. If you have anything to say, suggestions or questions feel free to leave a comment below.
Update 7.8.11: I got some good feedback from Samuel Williams for my dark theme. So I have redefined some parts and added a lot of brush-specific style changes. The source is now much easier to read. Thanks Samuel!
It’s amazing iin support of me to have a web page, which is helpful
designed for my experience. thanks admin
I’m Ronald, 27 age onetime and I cerebrate your website supply
so much a enceinte information, I wish stop line here