Clever Geek Handbook

How to create a block of code on a website

I am new to HTML / CSS. So I want to quote some programming code on my website like this in RubyThis is a quoting block I found on someone's website

How could I do this in my styling sheet? Thank!

+3


source to share


4 answers


Use Pygments . Once you have it installed ( sudo pip install pygments

on Ubuntu), if you save your code in a file like foo.rb

, you can call pygmentize like this:

pygmentize -O full,style=emacs -o foo.html foo.rb

which will output HTML with inline stylesheet using style emacs

(many other styles available ). As an alternative to using inline styles, you can get / create your own .css stylesheet that follows the Pyigs DOM structure (I personally like to use vim styles ) and tell Pyigs to just generate HTML without inline CSS:



pygmentize -o foo.html foo.rb

and now you just need to insert the stylesheet into the generated HTML.

I like this approach better than using JavaScript solutions because the selection is done at "compile time" and no work needs to be pushed to the user's browser.

+3


source


I found Google Code Prettify and it seems easy to use. It works for HTML using JavaScript and CSS, no server programming language needed. However, JavaScript must be enabled in the client, if you disable JavaScript in the browser, all coloring is gone.



+4


source


Take a look at coderay , it works great with many languages.

+1


source


I've only done syntax highlighting in media and in ASP.NET MVC, but CodeRay (also available as ruby stone ) seems like it can do what you want.

+1


source






More articles:


All Articles