Manuel "Moe" G.: HTML

Showing posts with label HTML. Show all posts

Thursday, March 26, 2009

Adding Google's google-code-prettify to Blogger

Image by palewire via Flickr

Wanted to be able to add highlighted code snippets, so copied how Python's Guido does it (nice example), as a stop-gap.

Blogger's support for programming code is embarrassing; zero-support given. So this is at best a partial fix. It makes use of Google's own google-code-prettify Javascript code. It is easy to use, so the whole of the docs fits easily on a single page:

http://google-code-prettify.googlecode.com/svn/trunk/README.html

Using "Blogger Control Panel | Layout | Edit HTML": just inside the "<head>" block, add these CSS and Javascript links:

<link
href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css'
rel='stylesheet' type='text/css'/>
<script
src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'
type='text/javascript'></script>

Then add "onload='prettyPrint()'" to the opening "<body>" tag

<body onload='prettyPrint()'>

You will need to use HTML escape if the code had naughty HTML syntax characters (&,",',>,<). A good writeup: http://wiki.python.org/moin/EscapingHtml. [Don't be confused like I was: this is different functionality than the xml.sax.saxutils function quoteattr !]. You can also use an online HTML escape tool like htmlescape.net.

Then put whatever code you wish between these HTML brackets

<pre class="prettyprint"> ... </pre>

Here is a tiny snippet of Python highlighted code:

def hello(i):
print "hello"
print i

For a whitespace sensitive language like Python, it pays to take a little caution, to compensate for the typical laxness of whitespace preservation in HTML and Blogger's basic editing tools. Type or cut-and-paste the code in the "Edit Html" tab - you will get good and predictable results.

In general, when using Blogger's in browser WYSIWYG editing tools, check the "Edit Html" tab last, just to make sure that Blogger's editing tools did not strip extra spaces from your Python code

Thursday, May 22, 2008

HTML prettyprint, cont.

Came to realization that I am trying to anticipate browser failures from lack of whitespace, but I would know nothing about it until I start rendering a few dozen pages programmatically. So skip the whitespace tom-foolery. Trim all the whitespace, normalize all to spaces, just use "textwrap" to wrap nicely. The idea, since the general algorithm has the potential to be exponential, is to use heuristics at the tips of the branches and the base of the tree, then clean up. Then use recursive algorithm, but with checks before descending if a computation is deemed to be "likely expensive". Going to add "minimum_total_charlength", because easy to calculate. Why did I forget to clean "tail" along with "text"?

Wednesday, May 21, 2008

more work on HTML prettyprint

today did not have chance to work on HTML pretty print was going to first lay out all the "text" and "tail" in a line seperated by the "whitespace preserving" tags

text tail text tail text text <whitespace preserving> text tail <whitespace preserving> text tail

then we have the: 1) empties 2) only whitespace 3) printing characters 4) printing characters with some whitespace at ends we only care about the whitespace that seperates printing characters, for the most part, printing characters in the "text" and seperating whitespace in the immediately following "tail" might be too much work, but, I would not be surprised if ran into issue later (all this work is not in vain, also I will need such stuff when I start programmically generating Python code, to compare my Python bytecode generation against Python's own, against the same algorithm, because of the work I am planning to do with AST, either Python's own in 2.6, or my own form)

Friday, May 16, 2008

"Empty" tags in HTML

These are the "empty" tags in HTML: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, param ...sometimes p important if you are outputting HTML from an XML dom

Manuel "Moe" G.