LobsterBlog

HTML5 Technical Article Beautifier

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 viewing its source code as well as any other page on this site to get a better idea of what it's like to use LobsterBlog.

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 SSI, PHP, and Javascript.

Features¶

• Inline execution of Python code
• Syntax highlighting for most common programming languages using pygments
• Embedded equations using the <latex> tag
• Easy way to create and embed GraphViz diagrams.
• Create matplotlib graphs using python code inside the <matplotlib> tag
• Create gnuplot graphs using the <gnuplot> tag.
• Table of contents generation with the <toc/> tag.
• Automatic computation of <img/> width and height.
• Automatically checks for dead links and/or missing files.
• Automatically generate highlighted HTML pages from source code files.
• Directory structure and zip file navigation.
• 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?)

Download¶

• lobsterblog.py (source)
• bulid.sh (source)
• media/css/lobstertech.css (source)
• media/css/lobstertech_print.css (source)
• media/css/syntax.css (source)
• media/css/ie.css (source)

Invocation¶

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
...

Examples¶

Syntax Highlighting¶

Here's what you would type into your editor:

<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>

And this is what you'll see thanks to LobsterBlog:

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);
}

¶

Here's the equation for the μ-Law voice codec:

<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>

Here's a scary looking equation:

Here's an example of how software engineers might use to better express certain equations such as the Goertzel Algorithm.

Assuming is a sequence of real number samples where , the power of the signal at a given frequency may be calculated as follows:

Matplotlib¶

Here's a graph of the μ-Law equation we showed earlier:

<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>

GNUPlot¶

<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>

GraphViz¶

<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>

Inline Python¶

HELLO KITTY

<p>
  <python><![CDATA[
    print "<p>HELLO KITTY</p>"
  ]]></python>
</p>

2 + 2 = 4

<p>2 + 2 = <py>2 + 2</py></p>

Bugs¶

• XML library will output things like <script src="foo"/> unless you put a space between the opening and closing tags.