Syntax highlighting for Markdown

[GoogleCodeExporter]

Markdown is used in eg. GitHub and Bitbucket as a format for nice looking 
readmes. It can be easily read as plain text or it can be rendered to web page.

What is the expected output?
Files with extension .md or .markdown should be treated almost like plain text 
but code blocks, links and headers etc should be highlighted.

What do you see instead?
Whole file is treated as code which results messed up looking highlighting.

On what browser?
Android app (WebView)

Please provide any additional information below.
More details of syntax at http://daringfireball.net/projects/markdown/
Example for adding support to Kate (linux text editor): 
https://github.com/claes/kate-markdown/blob/master/markdown.xml

Original issue reported on code.google.com by kuitsi on 27 Jun 2012 at 4:21

• Blocking: #250

[GoogleCodeExporter]

I use the following header at the top of all my markdown files, which gives me 
MathJax and Prettify support:

<style TYPE="text/css">
code.has-jax {font: inherit; font-size: 100%; background: inherit; border: 
inherit;}
body {font-family: Palatino;}
h1 {font-family: Century Gothic; color: #3C5084}
h2 {font-family: Century Gothic; color: #6076B4}
</style>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [['$','$'], ['\\(','\\)']],
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'] // removed 'code' entry
    }
});
MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i = 0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';
    }
});
</script>
<script type='text/javascript' 
src='http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorM
ML'></script>
<link 
href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' 
type='text/css' rel='stylesheet' />
<script 
src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' 
type='text/javascript'></script>
<script 
src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-lisp.js' 
type='text/javascript'></script>
<script type='text/javascript'>
function init() {
    var prettify = false;
    var blocks = document.querySelectorAll('pre code')
    for (var i = 0; i < blocks.length ; i++) {
        blocks[i].className += 'prettyprint';
        prettify = true;
    }
    if (prettify) {
      prettyPrint();
    }
}
window.onload = init;
</script>

However, there are some drawbacks. For example it means that all code blocks 
are handled by the prettifier and there doesn't appear to be a way to tell the 
prettifier the language. I'm writing some scheme code at the moment and it's 
coming out awful (even though I've included the scheme JS file).

Given the fact that it *is* possible to get this working in Markdown, I'd like 
to update the description of this RFE to:

  "please support a Markdown friendly way of specifying the language"

with the lower priority RFE of

  "please support a Markdown friendly way of knowing which blocks to render"

My header (above) has a workaround for the latter, but I don't know how to 
solve the former. Stack Overflow allow comments before the code block, e.g.

<!-- language: lang-scm -->

    (define (p) (p))

    (define (test x y)
      (if (= x 0) 0 y))

but that doesn't seem to do anything for me, so I'm guessing they've done some 
customisation.

Original comment by Sam.Hall...@gmail.com on 20 Oct 2012 at 5:53

[GoogleCodeExporter]

Working on a workaround for the second part of my last message.

Original comment by Sam.Hall...@gmail.com on 21 Oct 2012 at 9:46

[GoogleCodeExporter]

OK, updated and now the following inserted at the top of a Markdown file will 
look for comments containing language hints, add "prettyprint" to the class 
name of the <pre> node in <code><pre>...</pre></code> blocks, and activate 
Google Code Prettify.

Please provide this functionality as part of your module so that people can 
turn it on to get automatic syntax highlighting.

<!-- RFE: for easier Prettify install 
https://code.google.com/p/google-code-prettify/issues/detail?id=251 -->
<link 
href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' 
type='text/css' rel='stylesheet' />
<script 
src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' 
type='text/javascript'></script>
<script 
src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-lisp.js' 
type='text/javascript'></script>
<script 
src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-hs.js' 
type='text/javascript'></script>
<script type='text/javascript'>
function init() {
    // Ensure updates are posted to https://code.google.com/p/google-code-prettify/issues/detail?id=224
    var prettify = false;
    var blocks = document.querySelectorAll('pre code');
    for (var i = 0; i < blocks.length ; i += 1) {
        var code = blocks[i];
        code.className += ' prettyprint';
        var pre = code.parentNode;
        var above = pre;
        do {
            above = above.previousSibling;
        } while (above.nodeType == Node.TEXT_NODE)
        if (above.nodeType == Node.COMMENT_NODE) {
            var comment = above.data;
            var pattern = /^\s*language:\s*([\w\-]+)\s*$/i;
            var match = pattern.exec(comment);
            if (match != null) {
                var lang = match[1];
                // could do validation here
                code.className += (" " + lang);
            }
        }

        prettify = true;
    }
    if (prettify) {
      prettyPrint();
    }
}
window.onload = init;
</script>

Original comment by Sam.Hall...@gmail.com on 21 Oct 2012 at 11:32

[GoogleCodeExporter]

To make sure I understand, you're suggesting that I adopt a convention like the 
one used in stackexchange markdown to identify language hints in comments?

I'm hesitant to use <!-- ... --> since I'd prefer a single convention for HTML 
and XHTML and comments are not reliably preserved by a lot of XML transformers.

HTML5 has what's called a bogus comment : 
http://www.whatwg.org/specs/web-apps/current-work/multipage/tokenization.html#ta
g-open-state which is syntactically similar to an XML processing instruction.  
Would something like

   <?prettify lang="..."?>

work for you?

Regardless of syntax, do you want a language annotation to affect the next 
prettified block, or effectively override the default language handler for all 
subsequent block until the next language annotation?

Original comment by mikesamuel@gmail.com on 4 Feb 2013 at 10:49

[GoogleCodeExporter]

Original comment by mikesamuel@gmail.com on 4 Feb 2013 at 10:50

• Now blocking: #250

[GoogleCodeExporter]

Yup, you're right - a StackExchange style hint would be perfect. I'm happy for 
you to do anything that is valid HTML so long as it can live in markdown as 
well.

Original comment by Sam.Hall...@gmail.com on 21 Feb 2013 at 7:02

[GoogleCodeExporter]

http://code.google.com/p/google-code-prettify/source/detail?r=265 fixes this 
issue.
http://google-code-prettify.googlecode.com/svn/trunk/examples/quine.html shows 
this in action.

More documentation forthcoming, but in the meantime, a node like

    <?prettyprint ..?>

or

    <!--?prettyprint ...-->

or

    <!--prettyprint ...-->

that precedes the prettified element and is not separated from it by any node 
other than a white-space text node will be examined for attributes.

Those attributes are of the form

    name=value

with no quoting, ignorable white-space, or escaping convention since all values 
are identifiers, keywords or values.

Currently supported attributes are

    lang=<language-hint>
        specifies the language handler for the code snippet.
        For example, lang=cpp
     linenums=false
        line numbering is off.  This is the default.
    linenums=true
        specifies that lines in the code snippet should be
        rearranged into an <ol class="linenums"> so that
        lines can be separately styled and numbered in
        such a way that copy/paste does not copy numbers.
     linenums=<counting-number>
        like linenums=true but line number counting starts
        at the given line.

Original comment by mikesamuel@gmail.com on 22 Feb 2013 at 10:50

• Changed state: Fixed

[GoogleCodeExporter]

That sounds good.

For your reference, the following Markdown

<!-- language: lang-scm -->

    (define (A x y)
      (cond ((= y 0) 0)
            ((= x 0) (* 2 y))
            ((= y 1) 2)
            (else (A (- x 1)
                     (A x (- y 1))))))

is converted into the following HTML

<!-- language: lang-scm -->

<pre><code>(define (A x y)
  (cond ((= y 0) 0)
        ((= x 0) (* 2 y))
        ((= y 1) 2)
        (else (A (- x 1)
                 (A x (- y 1))))))
</code></pre>

so whatever you're proposing should replace the comment block I've written 
above.

I'm really looking forward to these updates – with only a few lines of 
Javascript imports at the top of Markdown files, everybody will be able to have 
LaTeX equations and pretty code blocks! Very exciting times for terse formats 
:-D

Original comment by Sam.Hall...@gmail.com on 22 Feb 2013 at 11:36

[GoogleCodeExporter]

Ah.  I will change it so that the mere presence of a <?prettyprint?> causes it 
to be treated as prettyprintable.  No class necessary.

Original comment by mikesamuel@gmail.com on 23 Feb 2013 at 2:03

[GoogleCodeExporter]

Fixed and available via the autoloader.  
http://google-code-prettify.googlecode.com/svn/trunk/tests/prettify_test_2.html#
procinstr4

Original comment by mikesamuel@gmail.com on 25 Feb 2013 at 5:01