Recreating google code wiki with wikiwym and google-code-prettify.

Saturday, April 9, 2011 Posted by Ruslan Matveev

Today I'm going to show you how to transform text in google code wiki syntax format into HTML using wikiwym and google-code-prettify.

Wikiwym is a JavaScript - based parser for the Google Code wiki syntax. Using this parser you can easily transform Google Code wiki syntax into HTML. It's simple, fast and reliable solution to generate HTML code out of Wiki syntax source, and what is also very important this can be done in non - browser environment (like Mozilla Rhino or Google V8), so you can even make some automated tool which for example generates documentation out of wiki syntax markdown on top of it.

It's also very easy to use. You just need to include GoogleCodeWikiParser.js into your html page and then execute following code which will transform wiki markdown into HTML.

// create an instance of the parser
var wikiParser = new GoogleCodeWikiParser();
// this is necessary in order to keep line breaks in <pre /> and <code /> tags
wikiParser
.options.outputSeparator = '\n';
// transform wiki markdown into html
var htmlCode = wikiParser.parse(wikiCode);

 

Let's see what it does on some real example, wiki code:

 = Wikiwym =

----

Wikiwym is wiki syntax parser, implemented in JavaScript, which tries to reasonably imitate the Google Code wiki format.

* Primary Features: *

* Fairly Small. The core parser lives in one file and has no external dependencies.
* It is not based on regular expressions. For the most part it scans char-by-char, so it is more robust in handling things like nested markup (e.g. *italicized bold*) than regex-based implementations.
* Can handle "most" Google Code wiki markup. See [http://code.google.com/p/wikiwym/wiki/SupportedWikiSyntax SupportedWikiSyntax] for what we believe works.
* The main parser code has a one-class, one-function interface, so it's easy to use.
* In some ways it's a better Google Code wiki parser than Google Code's wiki parser, as it can handle certain "strange, yet legal" linking constructs which GoCoWi doesn't natively handle.

* Primary Misfeatures: *

* Certain wiki markup is not supported. See [http://code.google.com/p/wikiwym/wiki/SupportedWikiSyntax SupportedWikiSyntax].
* "Inline" markup (bold, italics, etc. i.e. all markup which is not for block-level items) is only processed within a single line. And i'm not 100% sure we have the same meaning of "end of line" as GoCo does.
* There are not yet many configurable options. Use it as-is or hack it to suit.

 

And the transformation result will be:

<h1>Wikiwym</h1>
<hr />
Wikiwym is wiki syntax parser, implemented in JavaScript, which tries to reasonably imitate the Google Code wiki format.
<br />
<br />
<strong>Primary Features:</strong>
<ul>
<li>Fairly Small. The core parser lives in one file and has no external dependencies.</li>
<li>It is not based on regular expressions. For the most part it scans char-by-char, so it is more robust in handling things like nested markup (e.g. <strong>italicized bold</strong>) than regex-based implementations.</li>
<li>Can handle "most" Google Code wiki markup. See <a href="http://code.google.com/p/wikiwym/wiki/SupportedWikiSyntax">SupportedWikiSyntax</a> for what we believe works.</li>
<li>The main parser code has a one-class, one-function interface, so it's easy to use.</li>
<li>In some ways it's a better Google Code wiki parser than Google Code's wiki parser, as it can handle certain "strange, yet legal" linking constructs which GoCoWi doesn't natively handle.</li>
</ul>
<strong>Primary Misfeatures:</strong>
<ul>
<li>Certain wiki markup is not supported. See <a href="http://code.google.com/p/wikiwym/wiki/SupportedWikiSyntax">SupportedWikiSyntax</a>.</li>
<li>"Inline" markup (bold, italics, etc. i.e. all markup which is not for block-level items) is only processed within a single line. And i'm not 100% sure we have the same meaning of "end of line" as GoCo does.</li>
<li>There are not yet many configurable options. Use it as-is or hack it to suit.</li>
</ul>

 

Now we now how to transform wiki code into HTML, but what about in page code highlighting? That is why we will need google-code-prettify.

google-code-prettify is a Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page. Like everything from the Google - it's extremely easy to use and it just works. Apparently this is a solution that is originally used on Google Code wiki pages to highlight the code blocks. All you need is to include stylesheet and the script itself into your page:

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

 

After that, you will need to call prettyPrint() to process all <pre /> tags on the page, in most of the cases this will be done on page load. This will automatically transform <pre class="prettyprint">...</pre> and <code class="prettyprint">...</code> into HTML code that will represent pretty printed version of it:

<pre class="prettyprint">
        function foo() {
                return 'bar';
        }
</pre>

 

at the end will be transformed into:

<pre class="prettyprint">
       
<span class="kwd">function</span>
       
<span class="pln"> foo</span>
       
<span class="pun">()</span>
       
<span class="pln"> </span>
       
<span class="pun">{</span>
       
<span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span>
       
<span class="kwd">return</span>
       
<span class="pln"> </span>
       
<span class="str">'bar'</span>
       
<span class="pun">;</span>
       
<span class="pln"><br></span>
       
<span class="pun">}</span>
</pre>

 

Now it's a time to combine both solutions together and get google code wiki engine running right in your web browser:

Links:

Post a Comment