|
|
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
<link rel="stylesheet" href="css/styles.css"/>
|
|
|
</head>
|
|
|
<body>
|
|
|
<h1> Groucho </h1>
|
|
|
<p>
|
|
|
(A clunky tool I made to mar<span class="maths"><span class="regular"><span class="greek-letter">Χ</span></span></span> up blog posts)
|
|
|
</p>
|
|
|
<p>
|
|
|
<hr/>
|
|
|
|
|
|
</p>
|
|
|
<h2> Intro </h2>
|
|
|
<p>
|
|
|
Groucho is a little tool to generate an HTML file from a text containing simplified and non-intrusive markup codes.
|
|
|
</p>
|
|
|
<p>
|
|
|
It was written in order to ease writing blog posts for my website. Its goal is to allow to write content along with formatting instructions, aiming at the least friction, thus avoiding the need to do a second pass manually adding html tags or using a more complex editing tool, a process that is repetitive and tedious, and makes the source text less readable.
|
|
|
</p>
|
|
|
<p>
|
|
|
As the content I'm writting on these posts is mainly technical, Groucho is built around three main goals :
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
<li>Easy presentation of normal content, including sections titles, paragraphs, lists, images, links.</li>
|
|
|
<li>Formatting of basic maths or physics formulas, supporting maths symbols and notations.</li>
|
|
|
<li>Syntax highlighting of C source code.</li>
|
|
|
</ul>
|
|
|
<p>
|
|
|
Some examples :
|
|
|
</p>
|
|
|
<p>
|
|
|
<span class="code">*this is some text*</span>   will print in bold : <b>this is some text</b>.<br>
|
|
|
<span class="code">/this is some text/</span>   will print in italics : <i>this is some text</i>.<br>
|
|
|
<span class="code">_this is some text_</span>   will print underlined : <u>this is some text</u>.
|
|
|
</p>
|
|
|
<p>
|
|
|
<span class="code">[m]x_+ = \frac{{-b+\sqrt{b^2-4ac}}{2a}}[/m]</span>   will print this well-known maths formula :
|
|
|
</p>
|
|
|
<p>
|
|
|
<span class="maths">x<sub><span class="op"> + </span></sub> <span class="op"> = </span> <span class="fraction"><span class="numerator"><span class="op"> − </span>b<span class="op"> + </span><span class="sqrt-symbol">√</span><span class="sqrt-arg"> b<sup> <span class="digit">2</span></sup><span class="op"> − </span><span class="digit">4</span>ac </span></span><span class="denominator"><span class="digit">2</span>a</span></span></span>
|
|
|
</p>
|
|
|
<br>
|
|
|
<h3> Download and Usage </h3>
|
|
|
<p>
|
|
|
The source code of Groucho is available under a Public domain or MIT license (choose whichever you prefer). The fonts provided for the example document are covered by their own licenses (X11 license for CMU and the GUST font license for latin-modern-maths), which you can find in the font directory.
|
|
|
</p>
|
|
|
<p>
|
|
|
You can download the sources <a href="https://www.forkingpaths.garden/download.php?id=15">HERE</a>
|
|
|
. Please keep in mind though that this was written as a quick side-project for my personal use, and hence is far for production quality. It is made available online only in the interest of the reader's curiosity. It may or may not be updated in the future.
|
|
|
</p>
|
|
|
<p>
|
|
|
After downloading and extracting the archive, you should be able to compile in the source directory with :
|
|
|
</p>
|
|
|
<div class="code">cc -o groucho *.cpp</div>
|
|
|
<p>
|
|
|
To use it you can run :
|
|
|
</p>
|
|
|
<div class="code">./groucho in out</div>
|
|
|
<p>
|
|
|
Where in and out are your input and output files. If no files are specified groucho will get its input from the standard input and output to the standard output. You can test groucho by running it on the sample <span class="code">doc.groucho.txt</span> file. It should output the present quick documentation.
|
|
|
</p>
|
|
|
<p>
|
|
|
<hr/>
|
|
|
|
|
|
</p>
|
|
|
<h2> Basic principles </h2>
|
|
|
<p>
|
|
|
If not otherwise mentioned, a character in the input will produce the same character on the output. Some special characters and sequences will be interpreted as symbols and insert html entities in the html output. Some others will be interpreted as markups and insert html tags in the output stream. These tags contain <span class="code">class</span> attributes that are used by the browser, along with a css stylesheet, to style their content. A sample stylesheet is available with groucho, but it should be customizable at will (well, with css, you never know).
|
|
|
</p>
|
|
|
<p>
|
|
|
The symbols, the markups and their interpretations depends on the current mode of the interpreter which can be one of the four following modes :
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
<li>Text mode which is the default and doesn't require a markup.</li>
|
|
|
<li>HTML mode, which is used to insert raw html.</li>
|
|
|
<li>Maths mode, which is used to present simple mathematical formulas.</li>
|
|
|
<li>Code mode, which is used to present syntax-highlighted C code.</li>
|
|
|
</ul>
|
|
|
<p>
|
|
|
By default, groucho will operate in text mode. You can switch to one of the other modes by using block tags, like <span class="code">[maths]...[/maths]</span>, and all text inserted between these two tags will be interpreted in this mode.
|
|
|
</p>
|
|
|
<br>
|
|
|
<p>
|
|
|
<hr/>
|
|
|
|
|
|
</p>
|
|
|
<h2> HTML mode </h2>
|
|
|
<p>
|
|
|
All text placed between the tags <span class="code">[html]</span> and <span class="code">[/html]</span> will be interpreted as HTML and will be outputed as-is.<br>
|
|
|
To produce the basic tags needed for an HTML document, you should insert the following block at the beginning of your input file :
|
|
|
</p>
|
|
|
<p>
|
|
|
<span class="code">
|
|
|
[html]
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
<link rel="stylesheet" href="css/styles.css"/>
|
|
|
</head>
|
|
|
<body>
|
|
|
[/html]
|
|
|
</span>
|
|
|
</p>
|
|
|
<p>
|
|
|
Where you can also specify your CSS style sheet. To close those tags you should insert the following block at the end of your input file :
|
|
|
</p>
|
|
|
<p>
|
|
|
<span class="code">
|
|
|
[html]
|
|
|
</body>
|
|
|
</html>
|
|
|
[/html]
|
|
|
</span>
|
|
|
</p>
|
|
|
<br>
|
|
|
<p>
|
|
|
<hr/>
|
|
|
|
|
|
</p>
|
|
|
<h2> Markups common to Text and Maths mode </h2>
|
|
|
<p>
|
|
|
Text is the default mode, which is used when the source content is not contained between a pair of matching block markups.
|
|
|
</p>
|
|
|
<p>
|
|
|
Maths mode can be used by enclosing text between the markup tags <span class="code">[maths]</span> and <span class="code">[/maths]</span>, which will interpret its content as maths, and also place the output between <span class="code"><div class="maths"></div></span> html tags. Alternatively, if one whishes to insert maths into the same line as normal text, the markup tags <span class="code">[m]</span> and <span class="code">[/m]</span> can be used, which will place the output between <span class="code"><span class="maths"></span></span> html tags.
|
|
|
</p>
|
|
|
<p>
|
|
|
Text and maths mode share some of their markups, so we will present them together and then present their differences.
|
|
|
</p>
|
|
|
<h3> HTML entities </h3>
|
|
|
<p>
|
|
|
Some characters used by html tags will be replaced by html entities :
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
<li><span class="code"><</span> will be replaced by <span class="code">&lt;</span> in maths mode, and in text mode if it is not followed by an alphabetic character, by a <span class="code">/</span> or by a <span class="code">!</span>. Otherwise, it will be interpreted as the beginning of an html tag and the following text until the next matching <span class="code">></span> will be output as-is.</li>
|
|
|
<li><span class="code">></span> will be replaced by <span class="code">&gt;</span>.</li>
|
|
|
<li><span class="code">&</span> will be replaced by <span class="code">&amp;</span>.</li>
|
|
|
</ul>
|
|
|
<h3> Escape sequences </h3>
|
|
|
<p>
|
|
|
If a character is preceded by a <span class="code">\</span>, it will be interpreted as follows :
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
<li>A <span class="code">\n</span> will be interpreted as an intentional line break and produce a <span class="code"><br></span> tag.</li>
|
|
|
<li>An end of line preceded by <span class="code">\</span> will be interpreted as a source-only line break and will be suppressed in the output.</li>
|
|
|
<li>A <span class="code">\t</span> will output two em spaces <span class="code">&emsp;&emsp</span>.</li>
|
|
|
<li>A <span class="code">\s</span> will output a non breakable space <span class="code">&nbsp;</span>.</li>
|
|
|
</ul>
|
|
|
<p>
|
|
|
In addition to that, there's a list of letters or words that will be interpreted as a special symbol or markup when preceded by <span class="code">\</span> :
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
<li>Symbols and special letters. These symbols will likely be more useful in maths sections and not all fonts support them, but they're available in text mode as well :
|
|
|
<ul>
|
|
|
<li><span class="code">\star</span> will output a <span class="maths"><span class="op"> * </span></span></li>
|
|
|
<li><span class="code">\lowstar</span> will output a <span class="maths"><span class="op"> ∗ </span></span></li>
|
|
|
<li><span class="code">\div</span> will output a <span class="maths"><span class="op"> ÷ </span></span></li>
|
|
|
<li><span class="code">\minus</span> will output a <span class="maths"><span class="op"> − </span></span></li>
|
|
|
<li><span class="code">\cdot</span> will output a <span class="maths"><span class="op"> · </span></span></li>
|
|
|
<li><span class="code">\times</span> will output a <span class="maths"><span class="op"> × </span></span></li>
|
|
|
<li><span class="code">\otimes</span> will output a <span class="maths"><span class="op"> ⊗ </span></span></li>
|
|
|
<li><span class="code">\leq</span> will output a <span class="maths"><span class="rel">≤</span></span></li>
|
|
|
<li><span class="code">\geq</span> will output a <span class="maths"><span class="rel">≥</span></span></li>
|
|
|
<li><span class="code">\larr</span> will output a <span class="maths"><span class="delim">←</span></span></li>
|
|
|
<li><span class="code">\rarr</span> will output a <span class="maths"><span class="delim">→</span></span></li>
|
|
|
<li><span class="code">\inf</span> will output the symbol <span class="maths"><span class="symbol">∞</span></span></li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
<ul>
|
|
|
<li>Greek letters:
|
|
|
<ul>
|
|
|
<li><span class="code">\alpha</span>, <span class="code">\beta</span>, <span class="code">\gamma</span>, <span class="code">\delta</span>, etc. : <span class="maths"><span class="regular"><span class="greek-letter">α</span> <span class="greek-letter">β</span> <span class="greek-letter">γ</span> <span class="greek-letter">δ</span></span></span></li>
|
|
|
<li><span class="code">\Alpha</span>, <span class="code">\Beta</span>, <span class="code">\Gamma</span>, <span class="code">\Delta</span>, etc. : <span class="maths"><span class="regular"><span class="greek-letter">Α</span> <span class="greek-letter">Β</span> <span class="greek-letter">Γ</span> <span class="greek-letter">Δ</span></span></span></li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
<ul>
|
|
|
<li>Font style markups, availables in both modes, change the style of text enclosed between a matching pair of them :
|
|
|
<ul>
|
|
|
<li><span class="code">\b</span> for <b>bold</b>.</li>
|
|
|
<li><span class="code">\i</span> for <i>italics</i>.</li>
|
|
|
<li><span class="code">\u</span> for <u>underlined</u></li>
|
|
|
<li><span class="code">\r</span> is used to render text in roman in a section that would otherwise be in italics. It can be useful for function in maths blocks, as in <span class="maths">a <span class="op"> = </span> <span class="regular">log</span><span class="delim">(</span>b<span class="delim">)</span></span></li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
<ul>
|
|
|
<li>A single letter not matched by one of the above escape sequences will be output as is and not be interpreted as part of a markup.</li>
|
|
|
</ul>
|
|
|
<br>
|
|
|
<br>
|
|
|
<p>
|
|
|
<hr/>
|
|
|
|
|
|
</p>
|
|
|
<h2> Text mode </h2>
|
|
|
<h4> Additional markups </h4>
|
|
|
<p>
|
|
|
In text mode, a section title can be created by enclosing text in a matching pair of <span class="code">=</span> sequences. The section level corresponds to the number of <span class="code">=</span> signs :
|
|
|
</p>
|
|
|
<p>
|
|
|
<span class="code">===== Exemple title =====</span> in the input will produce the html <span class="code"><h5>Exemple title</h5></span>, resulting in :<br>
|
|
|
|
|
|
</p>
|
|
|
<h5> Exemple title </h5>
|
|
|
<p>
|
|
|
A separating line can be created by a sequence of five or more hyphens : <span class="code">-----</span> will output the html tag <span class="code"><hr/></span> resulting in :<br>
|
|
|
<hr/>
|
|
|
</p>
|
|
|
<p>
|
|
|
Paragraphs can be created by simply having two line breaks in a row.
|
|
|
</p>
|
|
|
<p>
|
|
|
The use of \b, \i and \u markups can alternatively replaced by (respectively) *, /, and _.
|
|
|
</p>
|
|
|
<p>
|
|
|
The following character sequences can be used to create symbols :
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
<li><span class="code">--</span> : two hyphens in a row will create a dash : —</li>
|
|
|
<li><span class="code">--></span> : one or more hyphens followed by a right angled bracket will produce a right arrow : →</li>
|
|
|
<li><span class="code"><--</span> : a left angled bracket followed by one or more hyphens will produce a left arrow : ←</li>
|
|
|
<li><span class="code">"</span> : matching pairs of double quotes will be replaced by <span class="code">&ldquo;</span> and <span class="code">&rdquo;</span> as in “quoted”.</li>
|
|
|
</ul>
|
|
|
<h4> Lists </h4>
|
|
|
<p>
|
|
|
A number of tabs followed by an hyphen, followed by a space, will be interpreted as a list item. The number of leading tabs determine the list depth when creating nested lists :
|
|
|
</p>
|
|
|
<p>
|
|
|
<span class="code">- item 1
|
|
|
- item 2
|
|
|
- sub item 2.1
|
|
|
- sub item 2.2
|
|
|
- item 3
|
|
|
</span>
|
|
|
</p>
|
|
|
<p>
|
|
|
will produce the following list :
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
<li>item 1</li>
|
|
|
<li>item 2
|
|
|
<ul>
|
|
|
<li>sub item 2.1</li>
|
|
|
<li>sub item 2.2</li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<li>item 3</li>
|
|
|
</ul>
|
|
|
<h3> External content </h3>
|
|
|
<h4> Links </h4>
|
|
|
<p>
|
|
|
he markup tags <span class="code">[url=][/url]</span> can be used to create a link. You specifiy the URL of your link by adding it after the <span class="code">=</span> sign. The text of the link goes between the two markup tags.<br>
|
|
|
For instance, <span class="code">[url=https://www.forkingpaths.garden]Home page[/url]</span> will create the following link : <a href="https://www.forkingpaths.garden">Home page</a>
|
|
|
that will land you on Forking Paths's website.
|
|
|
</p>
|
|
|
<br>
|
|
|
<h4> Images </h4>
|
|
|
<p>
|
|
|
n image can be created with the tag <span class="code">[img=]</span>. Similarly to the URL tag, you specify the URL to you image after the <span class="code">=</span> sign. Hence, the following tag <span class="code">[img=https://www.forkingpaths.garden/img/logo_black.png]</span> will display Forking Paths' logo :
|
|
|
</p>
|
|
|
<p>
|
|
|
<img src="https://www.forkingpaths.garden/img/logo_black.png">
|
|
|
</p>
|
|
|
<br>
|
|
|
<p>
|
|
|
<hr/>
|
|
|
|
|
|
</p>
|
|
|
<h2> Maths mode </h2>
|
|
|
<p>
|
|
|
By default, operators and capital letters will be printed in roman with a math-specific font, while lower-case letters will be printed in italics. You can always reverse that by using \r and \i markups.
|
|
|
</p>
|
|
|
<h3> Default symbol interpretation </h3>
|
|
|
<p>
|
|
|
In maths mode, the following (non-escaped) sequences are recognized as symbol equivalents :
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
<li><span class="code">-</span> is equivalent to <span class="code">\minus</span></li>
|
|
|
<li><span class="code">*</span> is equivalent to <span class="code">\times</span></li>
|
|
|
<li><span class="code">/</span> is equivalent to <span class="code">\div</span></li>
|
|
|
<li><span class="code"><=</span> is equivalent to <span class="code">\leq</span></li>
|
|
|
<li><span class="code">>=</span> is equivalent to <span class="code">\geq</span></li>
|
|
|
</ul>
|
|
|
<h3> Exponents and indices </h3>
|
|
|
<p>
|
|
|
A character preceded by a <span class="code">_</span> will be printed as an index, as in <span class="maths">u<sub>k</sub></span>. You can use a pair of curled brackets after the underscode to have a longer index, ie. this code : <span class="code">C_{(i,j)}</span> will produce this result : <span class="maths"><span class="regular">C</span><sub><span class="delim">(</span>i<span class="delim">,</span>j<span class="delim">)</span></sub></span>.
|
|
|
</p>
|
|
|
<p>
|
|
|
Similarly, the character <span class="code">^</span> is used for exponent, as in <span class="maths"><span class="regular">e</span><sup> <span class="regular">j<span class="delim">(</span><span class="digit">2</span><span class="greek-letter">π</span></span>f t<span class="op"> + </span><span class="greek-letter">φ</span><span class="delim">)</span></sup></span>.
|
|
|
</p>
|
|
|
<h3> Vectors </h3>
|
|
|
<p>
|
|
|
<span class="code">\vec</span> : the character following this escape markup will be rendered with a vector arrow above it, as in <span class="maths">v<span class="vector">⃗</span></span>.
|
|
|
</p>
|
|
|
<h3> Square roots </h3>
|
|
|
<p>
|
|
|
<span class="code">\sqrt</span> : a single character, or a sequence of characters contained in curly brackets, following this escape markup, will be printed as the arguments of a square root.
|
|
|
</p>
|
|
|
<p>
|
|
|
<span class="maths"><span class="sqrt-symbol">√</span><span class="sqrt-arg"> a<span class="op"> × </span> |