Nanoc tips: syntax highlight

Az én nanoc-om kramdown-t használ markdown konvertálásra. Az valami ehhez hasonló módon generálja ki a forráskód példákat:

1<pre>
2  <code class="language-html">
3  ...

De ez még majdnem semmi. Max egy szép kódblockot kapunk.

Több JavaScript alapú highlighter kipróbálása után a Snippet-vel sikerült az igényeimnek megfelelő megoldást találnom.

A következő html fregmentet illesztettem minden oldal header részébe (persze installációs leírás után…):

1<script type="text/javascript" src="/assets/js/jquery-snippet-min.js"></script> 
2<link rel="stylesheet" href="/assets/css/jquery-snippet-min.css">

A végére pedig:

 1<script type="text/javascript" >
 2$().ready(function(){
 3        $('pre code').each(function(){
 4                var lang = $(this).attr('class').replace('language-', '');
 5                var content = $(this).text();
 6                var par = $(this).parent();
 7                /*
 8                Need to replace CODE block with the pure content because 
 9                nippet plugin does not support CODE block but PRE only.
10                */
11                $(par).text(content);
12                try{
13                        $(par).snippet(lang,{style:"ide-eclipse"});
14                }catch(err){
15                        console.log(err);
16                }
17        });
18});
19</script>
Aug 30, 2013
comments powered by Disqus

Links

Cool

RSS