Source Code: lobsterblog.xml
<!DOCTYPE html> <html lang="en"> <head> <!--# include file="design_head.html" --> </head> <body> <!--# include file="design_top.html" --> <nav id="compass"> <ul> <li> <a href="/">Lobster Technologies ↪</a> </li> <li> <a href="tokyo_tyrant_security_vulnerability.html">↩ <py>xpath('//article/h1', 'tokyo_tyrant_security_vulnerability.xml')[0].text</py></a> <time><py>xpath('//article/time', 'tokyo_tyrant_security_vulnerability.xml')[0]</py></time> </li> </ul> </nav> <article> <h1>LobsterBlog</h1> <time>August 15, 2010</time> <h2 notoc="notoc">HTML5 Technical Article Beautifier</h2> <summary> <p> LobsterBlog is a command line tool meant to simplify the process of writing technical articles in HTML5. LobsterBlog functions similar to a compiler, taking care of tedious tasks (graphs, <latex alt="LaTeX">\LaTeX</latex>, etc.) by transforming well-defined content (and source code files) into highly accessible, beautful web pages you'll feel proud to publish online. </p> </summary> <p> LobsterBlog is designed to reduce boundaries between your content and the reader. Syntax-highlighted pages are automatically generated for as much content as possible to allow your readers to easily take a closer look at your conclusions, or see how your content was generated. For instance you can learn more about how this page was generated by <a href="lobsterblog.xml.html">viewing its source code</a> as well as any other page on this site to get a better idea of what it's like to use LobsterBlog. </p> <p> LobsterBlog does not generate content dynamically, nor does it rely on any specific webserver; your content must be statically recompiled when you make changes. This makes LobsterBlog suitable for enhancing your existing content-management system (like WordPress) or you can avoid a CMS altogether by generating dynamic content with the help of <acronym title="Server Side Includes">SSI</acronym>, PHP, and Javascript. </p> <div class="toc"> <h2 notoc="notoc">Table of Contents</h2> <toc/> </div> <h2>Features</h2> <ul> <li>Inline execution of Python code</li> <li>Syntax highlighting for most common programming languages using <a href="http://pygments.org/">pygments</a></li> <li>Embedded <latex alt="LaTeX">\LaTeX</latex> equations using the <code><latex></code> tag</li> <li>Easy way to create and embed <a title="GraphViz Example Gallery" href="http://www.graphviz.org/Gallery.php">GraphViz</a> diagrams.</li> <li>Create <a href="http://matplotlib.sourceforge.net/gallery.html">matplotlib</a> graphs using python code inside the <code><matplotlib></code> tag</li> <li>Create <a href="http://gnuplot.sourceforge.net/demo_4.4/">gnuplot</a> graphs using the <code><gnuplot></code> tag.</li> <li>Table of contents generation with the <code><toc/></code> tag.</li> <li>Automatic computation of <code><img/></code> width and height.</li> <li>Automatically checks for dead links and/or missing files.</li> <li>Automatically generate highlighted HTML pages from source code files.</li> <li>Directory structure and zip file navigation.</li> <li>Source code pages for inlined content detailing how they were generated. (Have you ever read an article with a really cool-looking graph and felt frustrated because you wished you knew how it was created?)</li> </ul> <h2>Download</h2> <ul class="files"> <li class="txt"> <a title="download lobsterblog.py" href="/lobsterblog.py"> lobsterblog.py</a> (<a title="source lobsterblog.py" href="lobsterblog.py.html">source</a>) </li> <li class="txt"> <a title="download build.sh" href="/build.sh"> bulid.sh</a> (<a title="source build.sh" href="build.sh.html">source</a>) </li> <li class="txt"> <a title="download lobstertech.css" href="/media/css/lobstertech.css"> media/css/lobstertech.css</a> (<a title="source lobstertech.css" href="/media_css_lobstertech.css.html">source</a>) </li> <li class="txt"> <a title="download lobstertech_print.css" href="/media/css/lobstertech_print.css"> media/css/lobstertech_print.css</a> (<a title="source lobstertech_print.css" href="/media_css_lobstertech_print.css.html">source</a>) </li> <li class="txt"> <a title="download syntax.css" href="/media/css/syntax.css"> media/css/syntax.css</a> (<a title="source syntax.css" href="/media_css_syntax.css.html">source</a>) </li> <li class="txt"> <a title="download ie.css" href="/media/css/ie.css"> media/css/ie.css</a> (<a title="source ie.css" href="/media_css_ie.css.html">source</a>) </li> </ul> <h2>Invocation</h2> <pre class="pig lobsterblog-syntax--console"> jart@compy:~/lobstertech$ python lobsterblog.py *.xml *.py media/css/*.css INFO:root:Processing voice_changer.xml -> html/voice_changer.html INFO:root:Source Code design_footer.xml -> html/design_footer.xml.html INFO:root:LaTeX: media/img/latex/lobsterblog.latex.1.png INFO:root:LaTeX: media/img/latex/lobsterblog.latex.2.png ... </pre> <h2>Examples</h2> <h3>Syntax Highlighting</h3> <p>Here's what you would type into your editor:</p> <pre class="pig lobsterblog-syntax--html"> <pre class="pig lobsterblog-syntax--c"><![CDATA[<![CDATA[ int isasocket(int fd) { char path[128]; char linkpath[128]; snprintf(path, sizeof(path), "/proc/self/fd/%d", fd); return (readlink(path, linkpath, sizeof(linkpath)) > 0 && strncmp(linkpath, "socket", strlen("socket")) == 0); } ]]>]]></pre> </pre> <p>And this is what you'll see thanks to LobsterBlog:</p> <pre class="pig lobsterblog-syntax--c"><![CDATA[ int isasocket(int fd) { char path[128]; char linkpath[128]; snprintf(path, sizeof(path), "/proc/self/fd/%d", fd); return (readlink(path, linkpath, sizeof(linkpath)) > 0 && strncmp(linkpath, "socket", strlen("socket")) == 0); } ]]></pre> <h3><latex alt="LaTeX">\Large\LaTeX</latex></h3> <p>Here's the equation for the μ-Law voice codec:</p> <p class="math"> <latex><![CDATA[ \large \begin{equation*} F(x) = \text{sgn}(x) \frac{\ln(1+ \mu |x|)}{\ln(1+\mu)} ~~~~-1 \leq x \leq 1 \end{equation*} ]]></latex> </p> <pre class="pig lobsterblog-syntax--html"> <p class="math"> <latex><![CDATA[<![CDATA[ \large \begin{equation*} F(x) = \text{sgn}(x) \frac{\ln(1+ \mu |x|)}{\ln(1+\mu)} ~~~~-1 \leq x \leq 1 \end{equation*} ]]>]]></latex> </p> </pre> <p>Here's a scary looking equation:</p> <p class="math"> <latex><![CDATA[ \large \begin{equation*} \oint_{\partial A}\vec H\;\cdot\mathrm{d}\vec s= \iint_A\vec J\;\cdot\mathrm{d}\vec A+\frac{\mathrm{d}}{\mathrm{d} t} \iint_A\vec D\;\cdot\mathrm{d}\vec A \end{equation*} ]]></latex> </p> <p>Here's an example of how software engineers might use <latex>\LaTeX</latex> to better express certain equations such as the <a href="http://en.wikipedia.org/wiki/Goertzel_algorithm">Goertzel Algorithm</a>.</p> <p> Assuming <latex>$S_{0,\dots,k-1}$</latex> is a sequence of real number samples where <latex>$-1 \le S_{n} \le 1$</latex>, the power <latex>$P$</latex> of the signal <latex>$S$</latex> at a given frequency <latex>$f$</latex> may be calculated as follows: </p> <p class="math"> <latex><![CDATA[ \large \begin{align*} \text{ let } \omega &= \frac{f}{\text{Hz}} \text{ where } 0 \le f \le \frac{\text{Hz}}{2} \\ G(n) &= \begin{cases} 0 & \text{ if } n < 0 \\ S_{n} + 2\cos(2\pi\omega)G(n-1) - G(n-2) & \text{ if } n \ge 0 \end{cases} \\ P &= G(k - 2)^{2} + G(k - 1)^{2} - 2\cos(2\pi\omega) G(k - 2)G(k - 1) \end{align*} ]]></latex> </p> <h3>Matplotlib</h3> <p>Here's a graph of the μ-Law equation we showed earlier:</p> <p class="math"> <matplotlib><![CDATA[ rcParams["figure.figsize"] = (4, 2) x = linspace(-1.0, 1.0, 1000) y = sign(x) * log(1 + 255 * abs(x)) / log(1 + 255) plot(x, y) ]]></matplotlib> </p> <pre class="pig lobsterblog-syntax--html"> <p class="math"> <matplotlib><![CDATA[<![CDATA[ rcParams['figure.figsize'] = (4, 2) x = linspace(-1.0, 1.0, 1000) y = sign(x) * log(1 + 255 * abs(x)) / log(1 + 255) plot(x, y) ]]>]]></matplotlib> </p> </pre> <h3>GNUPlot</h3> <p class="math"> <gnuplot><![CDATA[ # http://gnuplot.sourceforge.net/demo_4.4/surface2.9.gnu set terminal png transparent nocrop enhanced font Arial 8 size 420,320 #set key bmargin center horizontal Right noreverse enhanced autotitles nobox set nokey set parametric set view 50, 30, 1, 1 set isosamples 50, 20 set hidden3d offset 1 trianglepattern 3 undefined 1 altdiagonal bentover set ticslevel 0 set title "Interlocking Tori" set urange [ -3.14159 : 3.14159 ] noreverse nowriteback set vrange [ -3.14159 : 3.14159 ] noreverse nowriteback set zrange [ * : * ] noreverse nowriteback # (currently [-3.00000:1.50000] ) splot cos(u)+.5*cos(u)*cos(v),sin(u)+.5*sin(u)*cos(v),.5*sin(v) with lines, \ 1+cos(u)+.5*cos(u)*cos(v),.5*sin(v),sin(u)+.5*sin(u)*cos(v) with lines ]]></gnuplot> </p> <pre class="pig lobsterblog-syntax--html"> <p class="math"> <gnuplot><![CDATA[<![CDATA[ # http://gnuplot.sourceforge.net/demo_4.4/surface2.9.gnu set terminal png transparent nocrop enhanced font Arial 8 size 420,320 #set key bmargin center horizontal Right noreverse enhanced autotitles nobox set nokey set parametric set view 50, 30, 1, 1 set isosamples 50, 20 set hidden3d offset 1 trianglepattern 3 undefined 1 altdiagonal bentover set ticslevel 0 set title "Interlocking Tori" set urange [ -3.14159 : 3.14159 ] noreverse nowriteback set vrange [ -3.14159 : 3.14159 ] noreverse nowriteback set zrange [ * : * ] noreverse nowriteback # (currently [-3.00000:1.50000] ) splot cos(u)+.5*cos(u)*cos(v),sin(u)+.5*sin(u)*cos(v),.5*sin(v) with lines, \ 1+cos(u)+.5*cos(u)*cos(v),.5*sin(v),sin(u)+.5*sin(u)*cos(v) with lines ]]>]]></gnuplot> </p> </pre> <h3>GraphViz</h3> <p class="math"> <graphviz type="dot"><![CDATA[ digraph G { size="6,6"; rankdir="LR"; node [style=filled, fillcolor="#CDEB8B"]; router [shape=box3d]; nginx [shape=box3d]; token_ring [shape=doublecircle, label="TOKEN\nRING"]; {http1; http2; http3} -> nginx; {nginx; email_server; voip_server} -> token_ring; token_ring -> router -> {verizon; hurricane}; } ]]></graphviz> </p> <pre class="pig lobsterblog-syntax--html"> <p class="math"> <graphviz type="dot"><![CDATA[<![CDATA[ digraph G { size="6,6"; rankdir="LR"; node [style=filled, fillcolor="#CDEB8B"]; router [shape=box3d]; nginx [shape=box3d]; token_ring [shape=doublecircle, label="TOKEN\nRING"]; {http1; http2; http3} -> nginx; {nginx; email_server; voip_server} -> token_ring; token_ring -> router -> {verizon; hurricane}; } ]]>]]></graphviz> </p> </pre> <h3>Inline Python</h3> <p> <python><![CDATA[ print "<p>HELLO KITTY</p>" ]]></python> </p> <pre class="pig lobsterblog-syntax--html"> <p> <python><![CDATA[<![CDATA[ print "<p>HELLO KITTY</p>" ]]>]]></python> </p> </pre> <p>2 + 2 = <py>2 + 2</py></p> <pre class="pig lobsterblog-syntax--html"><![CDATA[ <p>2 + 2 = <py>2 + 2</py></p> ]]></pre> <h2>Bugs</h2> <ul> <li>XML library will output things like <code><script src="foo"/></code> unless you put a space between the opening and closing tags.</li> </ul> <aside> <ul class="tabbies"> <li><a href="lobsterblog.xml.html">View Source</a></li> </ul> </aside> </article> <!--# include file="design_footer.html" --> </body> </html>