maruku 0.2.12 → 0.2.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/docs/index.html +118 -0
- data/docs/markdown_extra2.html +34 -0
- data/docs/markdown_extra2.md +83 -0
- data/docs/markdown_syntax.html +265 -0
- data/docs/maruku.html +118 -0
- data/docs/proposal.html +90 -0
- data/docs/proposal.md +333 -0
- data/lib/maruku.rb +3 -0
- data/lib/maruku/html_helper.rb +103 -0
- data/lib/maruku/maruku.rb +50 -0
- data/lib/maruku/parse_block.rb +39 -27
- data/lib/maruku/parse_doc.rb +3 -1
- data/lib/maruku/string_utils.rb +5 -0
- data/lib/maruku/tests/benchmark.rb +42 -0
- data/lib/maruku/tests/tests.rb +116 -0
- data/lib/maruku/to_html.rb +11 -5
- data/lib/maruku/version.rb +1 -1
- data/tests/a.md +10 -0
- data/tests/bugs/complex_escaping.md +4 -0
- data/tests/others/inline_html.md +8 -1
- metadata +15 -2
data/docs/maruku.html
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
<?xml version='1.0' ?>
|
|
2
|
+
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
|
|
3
|
+
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
|
|
4
|
+
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'><head><title>Maruku: a Markdown interpreter</title><link href='style.css' rel='stylesheet' type='text/css' /></head><head><title>Maruku: a Markdown interpreter</title><link href='style.css' rel='stylesheet' type='text/css' /></head><body><h1 id='maruku_a_markdown_interpreter'>Mar<strong>u</strong>k<strong>u</strong>: a Markdown interpreter</h1><p><a href='http://maruku.rubyforge.org/>'>Maruku</a> is a Markdown interpreter written in <a href='http://www.ruby-lang.org'>Ruby</a>.</p><p>Maruku allows you to write in an easy-to-read-and-write syntax, like this:</p><blockquote><p><a href='http://maruku.rubyforge.org/maruku.md'>This document in Markdown</a></p></blockquote><p>Then it can be translated to HTML:</p><blockquote><p><a href='http://maruku.rubyforge.org/maruku.html'>This document in HTML</a></p></blockquote><p>or LaTeX, which is then converted to PDF:</p><blockquote><p><a href='http://maruku.rubyforge.org/maruku.pdf'>This document in PDF</a></p></blockquote><p>Maruku implements:</p><ul><li><p>the original <a href='http://daringfireball.net/projects/markdown/syntax'>Markdown syntax</a> (<a href='http://maruku.rubyforge.org/markdown_syntax.html'>HTML</a> o <a href='http://maruku.rubyforge.org/markdown_syntax.pdf'>PDF</a>, translated by Maruku)</p></li><li><p>all the improvements in <a href='http://www.michelf.com/projects/php-markdown/extra/'>PHP Markdown Extra</a>.</p></li><li><p>a new <a href='#meta'>meta-data syntax</a></p></li><li><p>some ideas from <a href='http://fletcher.freeshell.org/wiki/MultiMarkdown'>MultiMarkdown</a></p><ul><li>attributes in image links</li></ul></li></ul><p>The <a href='http://maruku.rubyforge.org/tests/'>test directory</a> is quite messy but it shows every capability.</p><h3 id='authors'>Authors</h3><p>Maruku has been developed so far by <a href='http://www.dis.uniroma1.it/~acensi/'>Andrea Censi</a>. Contributors are most welcome!</p><hr /><p>Table of contents: (<strong>auto-generated by Maruku!</strong>)</p><div class='maruku_toc'><ul style='list-style: none;'><li><span class='maruku_section_number'>1. </span><a href='#download' class='head'>Download</a><ul style='list-style: none;'><li><span class='maruku_section_number'>1.1. </span><a href='#bugs_report'>Bugs report</a></li></ul></li><li><span class='maruku_section_number'>2. </span><a href='#usage'>Usage</a><ul style='list-style: none;'><li><span class='maruku_section_number'>2.1. </span><a href='#from_the_command_line'>From the command line</a></li></ul></li><li><span class='maruku_section_number'>3. </span><a href='#extra'>Examples of PHP Markdown Extra syntax</a></li><li><span class='maruku_section_number'>4. </span><a href='#maruku-and-bluecloth'>Maruku and Bluecloth</a></li><li><span class='maruku_section_number'>5. </span><a href='#meta'>New meta-data syntax</a><ul style='list-style: none;'><li><span class='maruku_section_number'>5.1. </span><a href='#metadata_for_the_document'>Meta-data for the document</a></li><li><span class='maruku_section_number'>5.2. </span><a href='#metadata_for_elements'>Meta-data for elements</a></li><li><span class='maruku_section_number'>5.3. </span><a href='#shortcuts'>Shortcuts</a></li><li><span class='maruku_section_number'>5.4. </span><a href='#metalist'>List of meta-data</a></li><li><span class='maruku_section_number'>5.5. </span><a href='#examples'>Examples</a></li></ul></li><li><span class='maruku_section_number'>6. </span><a href='#features'>Other Features</a><ul style='list-style: none;'><li><span class='maruku_section_number'>6.1. </span><a href='#automatic_generation_of_the_table_of_contents'>Automatic generation of the table of contents</a></li><li><span class='maruku_section_number'>6.2. </span><a href='#this_header_contains_emphasis_strong_text_and_'>This header contains <em>emphasis</em> <strong>strong text</strong> and <tt style='background-color: #f0f0e0;'>code</tt></a></li><li><span class='maruku_section_number'>6.3. </span><a href='#use_html_entities'>Use HTML entities</a></li></ul></li><li><span class='maruku_section_number'>7. </span><a href='#todo_list'>TODO list</a></li><li><span class='maruku_section_number'>8. </span><a href='#future'>Future developments</a><ul style='list-style: none;'><li><span class='maruku_section_number'>8.1. </span><a href='#a_syntax_for_specifying_metadata_for_spanlevel_elements'>A syntax for specifying meta-data for span-level elements</a></li><li><span class='maruku_section_number'>8.2. </span><a href='#a_syntax_for_commenting_parts_of_the_document'>A syntax for commenting parts of the document</a></li><li><span class='maruku_section_number'>8.3. </span><a href='#a_syntax_for_adding_math'>A syntax for adding math</a></li></ul></li></ul></div><hr /><h2 class='head' id='download'><span class='maruku_section_number'>1. </span>Download</h2><p>The development site is <a href='http://rubyforge.org/projects/maruku/'>http://rubyforge.org/projects/maruku/</a>.</p><p>Install with:</p><pre style='background-color: #f0f0e0;'>$ gem install maruku
|
|
5
|
+
</pre><p>Released files can also be seen at <a href='http://rubyforge.org/frs/?group_id=2795'>http://rubyforge.org/frs/?group_id=2795</a>.</p><p>Anonymous access to the repository is possible with:</p><pre style='background-color: #f0f0e0;'>$ svn checkout svn://rubyforge.org/var/svn/maruku
|
|
6
|
+
</pre><p>If you want commit access to the repository, just create an account on Rubyforge and <a href='http://www.dis.uniroma1.it/~acensi/contact.html'>drop me a mail</a>.</p><h3 id='bugs_report'><span class='maruku_section_number'>1.1. </span>Bugs report</h3><p>Use the <a href='http://rubyforge.org/tracker/?group_id=2795'>tracker</a> or <a href='http://www.dis.uniroma1.it/~acensi/contact.html'>drop me an email</a>.</p><h2 id='usage'><span class='maruku_section_number'>2. </span>Usage</h2><p>This is the basic usage:</p><pre class='ruby' style='background-color: #f0f0e0;'><span class='ident'>require</span> <span class='punct'>'</span><span class='string'>rubygems</span><span class='punct'>'</span>
|
|
7
|
+
<span class='ident'>require</span> <span class='punct'>'</span><span class='string'>maruku</span><span class='punct'>'</span>
|
|
8
|
+
|
|
9
|
+
<span class='ident'>doc</span> <span class='punct'>=</span> <span class='constant'>Maruku</span><span class='punct'>.</span><span class='ident'>new</span><span class='punct'>(</span><span class='ident'>markdown_string</span><span class='punct'>)</span>
|
|
10
|
+
<span class='ident'>puts</span> <span class='ident'>doc</span><span class='punct'>.</span><span class='ident'>to_html</span>
|
|
11
|
+
</pre><p>The method <tt style='background-color: #f0f0e0;'>to_html</tt> outputs only an HTML fragment, while the method <tt style='background-color: #f0f0e0;'>to_html_document</tt> outputs a complete XHTML 1.0 document:</p><pre class='ruby' style='background-color: #f0f0e0;'><span class='ident'>puts</span> <span class='ident'>doc</span><span class='punct'>.</span><span class='ident'>to_html_document</span></pre><p>You can have the REXML document tree with:</p><pre class='ruby' style='background-color: #f0f0e0;'><span class='ident'>tree</span> <span class='punct'>=</span> <span class='ident'>doc</span><span class='punct'>.</span><span class='ident'>to_html_document_tree</span>
|
|
12
|
+
</pre><h3 id='from_the_command_line'><span class='maruku_section_number'>2.1. </span>From the command line</h3><p>There are two command-line programs installed: <tt style='background-color: #f0f0e0;'>maruku</tt> and <tt style='background-color: #f0f0e0;'>marutex</tt>.</p><ul><li><p><tt style='background-color: #f0f0e0;'>maruku</tt> converts Markdown to HTML:</p><pre style='background-color: #f0f0e0;'>$ maruku file.md # creates file.html</pre></li><li><p><tt style='background-color: #f0f0e0;'>marutex</tt> converts Markdown to LaTeX, then calls <tt style='background-color: #f0f0e0;'>pdflatex</tt> to transform to PDF</p><pre style='background-color: #f0f0e0;'>$ marutex file.md # creates file.tex and file.pdf</pre></li></ul><h2 id='extra'><span class='maruku_section_number'>3. </span>Examples of PHP Markdown Extra syntax</h2><ul><li><p>tables</p><pre style='background-color: #f0f0e0;'>Col1 | Very very long head | Very very long head|
|
|
13
|
+
-----|:-------------------:|-------------------:|
|
|
14
|
+
cell | center-align | right-align |
|
|
15
|
+
</pre><table class='example'><thead><tr><th>Col1</th><th>Very very long head</th><th>Very very long head</th></tr></thead><tbody><tr><td style='text-align: left;'>cell</td><td style='text-align: center;'>center-align</td><td style='text-align: right;'>right-align</td></tr></tbody></table></li><li><p>footnotes <sup id='fnref:1'><a href='#fn:1' rel='footnote'>1</a></sup></p><pre style='background-color: #f0f0e0;'>* footnotes [^foot]
|
|
16
|
+
|
|
17
|
+
[^foot]: I really was missing those.</pre></li><li><p>Markdown inside HTML elememnts</p></li></ul><pre class='xml' style='background-color: #f0f0e0;'><span class='punct'><</span><span class='tag'>div</span> <span class='attribute'>markdown</span><span class='punct'>="</span><span class='string'>1</span><span class='punct'>"</span> <span class='attribute'>style</span><span class='punct'>="</span><span class='string'>border: solid 1px black</span><span class='punct'>"></span>
|
|
18
|
+
This is a div with Markdown **strong text**
|
|
19
|
+
<span class='punct'></</span><span class='tag'>div</span><span class='punct'>></span>
|
|
20
|
+
</pre><div style='border: solid 1px black'><p>This is a div with Markdown <strong>strong text</strong></p></div><ul><li><p>header ids</p><pre style='background-color: #f0f0e0;'>## Download ## {#download}</pre><p>For example, <a href='#download'>a link to the download</a> header.</p><p>Note that you can use also the new <a href='#meta'>meta-data syntax</a> for the same purpose:</p><pre style='background-color: #f0f0e0;'>@ id: download
|
|
21
|
+
## Header ## </pre></li><li><p>definition lists</p><pre style='background-color: #f0f0e0;'>Definition list
|
|
22
|
+
: something very hard to parse
|
|
23
|
+
</pre><dl><dt>Definition list</dt><dd>something very hard to parse</dd></dl></li><li><p>abbreviations or <abbr title='Simply an abbreviation'>ABB</abbr> for short.</p></li></ul><h2 id='maruku-and-bluecloth'><span class='maruku_section_number'>4. </span>Maruku and Bluecloth</h2><p>The other Ruby implementation of Markdown is <a href='http://www.deveiate.org/projects/BlueCloth'>Bluecloth</a>.</p><p>Maruku is much different in philosophy from Bluecloth: the biggest difference is that <em>parsing</em> is separated from <em>rendering</em>. In Maruku, an in-memory representation of the Markdown document is created. Instead, Bluecloth mantains the document in memory as a String at all times, and does a series of <tt style='background-color: #f0f0e0;'>gsub</tt> to transform to HTML.</p><p>The in-memory representation makes it very easy to export to various formats (at the moment HTML and LaTeX/PDF; the next is pretty-printed Markdown).</p><p>Other improvements over Bluecloth:</p><ul><li><p>the HTML output is provided also as a <tt style='background-color: #f0f0e0;'>REXML</tt> document tree.</p></li><li><p>PHP Markdown Syntax support.</p></li></ul><h2 id='meta'><span class='maruku_section_number'>5. </span>New meta-data syntax</h2><p>Maruku implements a syntax that allows to attach "meta" information to objects.</p><h3 id='metadata_for_the_document'><span class='maruku_section_number'>5.1. </span>Meta-data for the document</h3><p>Meta-data for the document itself is specified through the use of email headers:</p><pre style='background-color: #f0f0e0;'>Title: A simple document containing meta-headers
|
|
24
|
+
CSS: style.css
|
|
25
|
+
|
|
26
|
+
Content of the document
|
|
27
|
+
</pre><p>When creating the document through</p><pre class='ruby' style='background-color: #f0f0e0;'><span class='constant'>Maruku</span><span class='punct'>.</span><span class='ident'>new</span><span class='punct'>(</span><span class='ident'>s</span><span class='punct'>).</span><span class='ident'>to_html_document</span>
|
|
28
|
+
</pre><p>the title and stylesheet are added as expected.</p><p>Meta-data keys are assumed to be case-insensitive.</p><h3 id='metadata_for_elements'><span class='maruku_section_number'>5.2. </span>Meta-data for elements</h3><p>Maruku introduces a new syntax for attaching metadata to paragraphs, tables, and so on.</p><p>For example, consider the creation of two paragraphs:</p><pre style='background-color: #f0f0e0;'>Paragraph 1 is a warning.
|
|
29
|
+
|
|
30
|
+
Paragraph 2
|
|
31
|
+
</pre><p>Now you really want to attach a 'class' attribute to the paragraphs (for example for CSS styling). Maruku allows you to use:</p><pre style='background-color: #f0f0e0;'>@ class: warning
|
|
32
|
+
Paragraph 1 is a warning
|
|
33
|
+
|
|
34
|
+
Paragraph 2
|
|
35
|
+
|
|
36
|
+
</pre><p>You can add more by separating with a <tt style='background-color: #f0f0e0;'>;</tt>:</p><pre style='background-color: #f0f0e0;'>@ class: warning; id: warning1
|
|
37
|
+
Paragraph 1 is a warning
|
|
38
|
+
</pre><p>A meta-data declaration is composed of</p><ol><li>newline</li><li>an at-symbol <tt style='background-color: #f0f0e0;'>@</tt></li><li>a series of name-value pairs. Each name-value is separated by a colon <tt style='background-color: #f0f0e0;'>:</tt>, pairs are separated by semi-colons <tt style='background-color: #f0f0e0;'>;</tt></li></ol><p>Many declaration can be used, and they refer to <em>the following</em> object:</p><pre style='background-color: #f0f0e0;'>@ class: warning
|
|
39
|
+
@ id: warning1
|
|
40
|
+
Paragraph 1 is a warning
|
|
41
|
+
</pre><p>These can also be separated by newlines:</p><pre style='background-color: #f0f0e0;'>@ class: warning
|
|
42
|
+
|
|
43
|
+
@ id: warning1
|
|
44
|
+
|
|
45
|
+
Paragraph 1 is a warning
|
|
46
|
+
|
|
47
|
+
</pre><h3 id='shortcuts'><span class='maruku_section_number'>5.3. </span>Shortcuts</h3><p>This:</p><pre style='background-color: #f0f0e0;'>@ .xyz
|
|
48
|
+
Paragraph
|
|
49
|
+
</pre><p>is equivalent to:</p><pre style='background-color: #f0f0e0;'>@ class: xyz
|
|
50
|
+
Paragraph
|
|
51
|
+
</pre><p>This:</p><pre style='background-color: #f0f0e0;'>@ #xyz
|
|
52
|
+
Paragraph
|
|
53
|
+
</pre><p>is equivalent to:</p><pre style='background-color: #f0f0e0;'>@ id: xyz
|
|
54
|
+
Paragraph
|
|
55
|
+
</pre><p>Also, if the value is not present, it defaults to <tt style='background-color: #f0f0e0;'>true</tt>:</p><pre style='background-color: #f0f0e0;'>@ test
|
|
56
|
+
|
|
57
|
+
This paragraph has the attribute `test` set to `true`.
|
|
58
|
+
</pre><hr /><h3 id='metalist'><span class='maruku_section_number'>5.4. </span>List of meta-data</h3><dl><dt><strong><tt style='background-color: #f0f0e0;'>title</tt>, <tt style='background-color: #f0f0e0;'>subject</tt></strong></dt><dd><p>(document) Sets the title of the document (HTML: used in the <tt style='background-color: #f0f0e0;'>TITLE</tt> element).</p></dd><dt><strong><tt style='background-color: #f0f0e0;'>use_numbered_headers</tt></strong></dt><dd><p>(document) If <tt style='background-color: #f0f0e0;'>true</tt>, headers are numbered (just like this document). Default is <tt style='background-color: #f0f0e0;'>false</tt>.</p></dd><dt><strong><tt style='background-color: #f0f0e0;'>css</tt></strong></dt><dd><p>(document, HTML) Url of stylesheet.</p></dd><dt><strong><tt style='background-color: #f0f0e0;'>html_use_syntax</tt></strong></dt><dd><p>(document, HTML) If set, use the <a href='http://syntax.rubyforge.org/'>Ruby <tt style='background-color: #f0f0e0;'>syntax</tt> library</a> to add source highlighting.</p></dd><dt><strong><tt style='background-color: #f0f0e0;'>latex_use_listings</tt></strong></dt><dd><p>(document, LaTeX) If set, use the fancy <a href='http://www.ctan.org/tex-archive/macros/latex/contrib/listings/'><tt style='background-color: #f0f0e0;'>listings</tt> package</a> for better displaying code blocks.</p><p>If not set, use standard <tt style='background-color: #f0f0e0;'>verbatim</tt> environment.</p></dd><dt><strong><tt style='background-color: #f0f0e0;'>style</tt>, <tt style='background-color: #f0f0e0;'>id</tt>, <tt style='background-color: #f0f0e0;'>class</tt></strong></dt><dd><p>(any block object, HTML) Standard CSS attributes are copied.</p></dd><dt><strong><tt style='background-color: #f0f0e0;'>lang</tt></strong></dt><dd><p>(code blocks) Name of programming language (<tt style='background-color: #f0f0e0;'>ruby</tt>) for syntax highlighting.</p><p>Default for this is <tt style='background-color: #f0f0e0;'>code_lang</tt> in document.</p><p>Syntax highlighting is delegated to the <a href='http://syntax.rubyforge.org/'><tt style='background-color: #f0f0e0;'>syntax</tt> library</a> for HTML output and to the <a href='http://www.ctan.org/tex-archive/macros/latex/contrib/listings/'><tt style='background-color: #f0f0e0;'>listings</tt> package</a> for LaTeX output.</p></dd><dt><strong><tt style='background-color: #f0f0e0;'>code_show_spaces</tt></strong></dt><dd><p>Shows tabs and newlines (default is read in the document object).</p></dd><dt><strong><tt style='background-color: #f0f0e0;'>code_background_color</tt></strong></dt><dd><p>Background color for code blocks. (default is read in the document object).</p><p>The format is either a named color (<tt style='background-color: #f0f0e0;'>green</tt>, <tt style='background-color: #f0f0e0;'>red</tt>) or a CSS color of the form <tt style='background-color: #f0f0e0;'>#ff00ff</tt>.</p><ul><li><p>for <strong>HTML output</strong>, the value is put straight in the <tt style='background-color: #f0f0e0;'>background-color</tt> CSS property of the block.</p></li><li><p>for <strong>LaTeX output</strong>, if it is a named color, it must be a color accepted by the LaTeX <tt style='background-color: #f0f0e0;'>color</tt> packages. If it is of the form <tt style='background-color: #f0f0e0;'>#ff00ff</tt>, Maruku defines a color using the <tt style='background-color: #f0f0e0;'>\color[rgb]{r,g,b}</tt> macro.</p><p>For example, for <tt style='background-color: #f0f0e0;'>#0000ff</tt>, the macro is called as: <tt style='background-color: #f0f0e0;'>\color[rgb]{0,0,1}</tt>.</p></li></ul></dd></dl><h3 id='examples'><span class='maruku_section_number'>5.5. </span>Examples</h3><p>An example of this is the following:</p><pre style='background-color: #f0f0e0;'>@¬code_show_spaces;¬code_background_color:¬green
|
|
59
|
+
|
|
60
|
+
» ¬One¬space
|
|
61
|
+
» ¬¬Two¬spaces
|
|
62
|
+
» » ¬» Tab,¬space,¬tab
|
|
63
|
+
» » » » Tab,¬tab,¬tab¬and¬all¬is¬green!
|
|
64
|
+
</pre><p>That will produce:</p><pre style='background-color: green;'>¬One¬space
|
|
65
|
+
¬¬Two¬spaces
|
|
66
|
+
» ¬» Tab,¬space,¬tab
|
|
67
|
+
» » » Tab,¬tab,¬tab¬and¬all¬is¬green!
|
|
68
|
+
</pre><p>Example with css-style color:</p><pre style='background-color: #f0f0e0;'>@ code_background_color: #455678
|
|
69
|
+
|
|
70
|
+
A strange color
|
|
71
|
+
</pre><p>produces:</p><pre style='background-color: #455678;'>A strange color
|
|
72
|
+
</pre><p>Or highlighting (does not work well yet):</p><pre style='background-color: #f0f0e0;'>@ lang: xml
|
|
73
|
+
<div style="text-align:center">Div</div>
|
|
74
|
+
</pre><p>produces:</p><pre class='xml' style='background-color: #f0f0e0;'><span class='punct'><</span><span class='tag'>div</span> <span class='attribute'>style</span><span class='punct'>="</span><span class='string'>text-align:center</span><span class='punct'>"></span>Div<span class='punct'></</span><span class='tag'>div</span><span class='punct'>></span>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
</pre><hr /><h2 id='features'><span class='maruku_section_number'>6. </span>Other Features</h2><h3 id='automatic_generation_of_the_table_of_contents'><span class='maruku_section_number'>6.1. </span>Automatic generation of the table of contents</h3><p>If you create a list, and then set the <tt style='background-color: #f0f0e0;'>toc</tt> attribute, when rendering Maruku will create an auto-generated table of contents.</p><pre style='background-color: #f0f0e0;'>@ toc
|
|
78
|
+
* This will become a table of contents (this text will be scraped).
|
|
79
|
+
</pre><p>You can see an example of this at the beginning of this document.</p><h3 id='this_header_contains_emphasis_strong_text_and_'><span class='maruku_section_number'>6.2. </span>This header contains <em>emphasis</em> <strong>strong text</strong> and <tt style='background-color: #f0f0e0;'>code</tt></h3><p>Note that this header contains formatting and it still works, also in the table of contents.</p><p>And <a href='#features'>This is a <em>link</em> with <strong>all</strong> <strong><em>sort</em></strong> of <tt style='background-color: #f0f0e0;'>weird stuff</tt></a> in the text.</p><h3 id='use_html_entities'><span class='maruku_section_number'>6.3. </span>Use HTML entities</h3><p>If you want to use HTML entities, go on! We will take care of the translation to LaTeX:</p><table><thead><tr><th>Entity</th><th>Result</th></tr></thead><tbody><tr><td style='text-align: left;'><tt style='background-color: #f0f0e0;'>&copy;</tt></td><td style='text-align: left;'>©</td></tr><tr><td style='text-align: left;'><tt style='background-color: #f0f0e0;'>&pound;</tt></td><td style='text-align: left;'>£</td></tr><tr><td style='text-align: left;'><tt style='background-color: #f0f0e0;'>a&nbsp;b</tt></td><td style='text-align: left;'>a b</td></tr><tr><td style='text-align: left;'><tt style='background-color: #f0f0e0;'>&lambda;</tt></td><td style='text-align: left;'>λ</td></tr><tr><td style='text-align: left;'><tt style='background-color: #f0f0e0;'>&mdash;</tt></td><td style='text-align: left;'>—</td></tr></tbody></table><h2 id='todo_list'><span class='maruku_section_number'>7. </span>TODO list</h2><ul><li><p>Export to HTML</p><ol><li><p>Add <tt style='background-color: #f0f0e0;'>-split</tt> options to <tt style='background-color: #f0f0e0;'>maruku</tt> that splits the document over multiple pages.</p><p>This should require the possibility of specifying a template for navigational elements. Investigate template engine.</p></li><li><p>Include RubyPants</p></li></ol></li><li><p>Export to PDF</p><ul><li>support for images</li></ul></li><li><p>Export to Markdown (pretty-printing)</p></li></ul><h2 id='future'><span class='maruku_section_number'>8. </span>Future developments</h2><p>I think that <a href='http://sophos.berkeley.edu/macfarlane/pandoc/'>Pandoc</a> and <a href='http://fletcher.freeshell.org/wiki/MultiMarkdown'>MultiMarkdown</a> are very cool projects. However, they are written in Haskell and Perl, respectively. I would love to have an equivalent in Ruby.</p><h3 id='a_syntax_for_specifying_metadata_for_spanlevel_elements'><span class='maruku_section_number'>8.1. </span>A syntax for specifying meta-data for span-level elements</h3><p>Maybe something like this:</p><pre style='background-color: #f0f0e0;'>This is a paragraph. Really, a normal paragraph. The second
|
|
80
|
+
line of this paragraph has the last element {with meta data}@ class: important_span
|
|
81
|
+
and the paragraph continues...
|
|
82
|
+
</pre><p>So the idea is:</p><ul><li><p>Only elements at the end of the line can have meta data.</p></li><li><p>Syntax is:</p><ol><li>Opening brace <tt style='background-color: #f0f0e0;'>{</tt>.</li><li>Any string that does not contain the sequence <tt style='background-color: #f0f0e0;'>}@</tt>.</li><li>Closing brace and at-symbol <tt style='background-color: #f0f0e0;'>}@</tt>.</li><li>Attributes specification like the block-level metadata.</li></ol></li></ul><p>Or, we could allow metadata specified <strong>after the text</strong>. In the following, three fragments are marked as "special", and, after their containing block-level elements, their attributes are set:</p><pre style='background-color: #f0f0e0;'>Lorem ipsum dolor sit @{amet}, consectetuer adipiscing
|
|
83
|
+
elit. Donec sit amet sapien vitae augue @{interdum hendrerit.}
|
|
84
|
+
Maecenas tempor ultrices nisl. @{Praesent laoreet tortor sit
|
|
85
|
+
amet est.} Praesent in nisl eu libero sodales bibendum.
|
|
86
|
+
|
|
87
|
+
@{1} id: amet
|
|
88
|
+
@{2} style: "font-style: bold"
|
|
89
|
+
@{3} class: warning
|
|
90
|
+
</pre><p>We can be much liberal in the syntax. For example, instead of numeric references to the part in the text, we could write:</p><pre style='background-color: #f0f0e0;'>Lorem ipsum dolor sit @{amet}, consectetuer adipiscing
|
|
91
|
+
elit. Donec sit amet sapien vitae augue @{interdum hendrerit.}
|
|
92
|
+
Maecenas tempor ultrices nisl. @{Praesent laoreet tortor sit
|
|
93
|
+
amet est.} Praesent in nisl eu libero sodales bibendum.
|
|
94
|
+
|
|
95
|
+
@{amet} id: amet
|
|
96
|
+
@{interdum ...} style: "font-style: bold"
|
|
97
|
+
@{Praesent ...} class: warning
|
|
98
|
+
</pre><p>with <tt style='background-color: #f0f0e0;'>...</tt> acting as a wildcard, to match a long phrase (<tt style='background-color: #f0f0e0;'>{ Praesent laoreet tortor sit amet est.}</tt>) without specifying the full text.</p><p>I feel this is very readable and not intrusive. But then again, subjective tastes vary. Let me know of any comments and suggestions. I want to wait for feedback before implementing this.</p><h3 id='a_syntax_for_commenting_parts_of_the_document'><span class='maruku_section_number'>8.2. </span>A syntax for commenting parts of the document</h3><pre style='background-color: #f0f0e0;'>This is a paragraph
|
|
99
|
+
% This is a comment
|
|
100
|
+
</pre><p>Or <tt style='background-color: #f0f0e0;'>%</tt> on a line by itself comments the following block:</p><pre style='background-color: #f0f0e0;'>% The following paragraph is ignored
|
|
101
|
+
|
|
102
|
+
%
|
|
103
|
+
Lorem ipsum dolor sit amet, consectetuer adipiscing
|
|
104
|
+
elit. Donec sit amet sapien vitae augue interdum hendrerit.
|
|
105
|
+
Maecenas tempor ultrices nisl. Praesent laoreet tortor sit
|
|
106
|
+
amet est. Praesent in nisl eu libero sodales bibendum.
|
|
107
|
+
|
|
108
|
+
This paragraph is not ignored.
|
|
109
|
+
</pre><h3 id='a_syntax_for_adding_math'><span class='maruku_section_number'>8.3. </span>A syntax for adding math</h3><p>Something inspired from LaTeX should be familiar to all:</p><pre style='background-color: #f0f0e0;'>This is inline math: $\alpha$
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
This is an equation with label:
|
|
113
|
+
|
|
114
|
+
$ \alpha = \beta + \gamma $ (eq:1)
|
|
115
|
+
|
|
116
|
+
This is a reference to equation: please see (eq:1)
|
|
117
|
+
|
|
118
|
+
</pre><div class='footnotes'><hr /><ol><li id='fn:1'><p>I really was missing those.<a href='#fnref:1' rev='footnote'>↩</a></p></li></ol></div><div class='maruku_signature'><hr /><span style='font-size: small; font-style: italic'>Created by <a href='http://maruku.rubyforge.org' title='Maruku: a Markdown interpreter'>Maruku</a> at 16:59 on Friday, December 29th, 2006.</span></div></body></html>
|
data/docs/proposal.html
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
<?xml version='1.0' ?>
|
|
2
|
+
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
|
|
3
|
+
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
|
|
4
|
+
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'><head><title>Syntax for meta-data</title><link href='style.css' rel='stylesheet' type='text/css' /></head><head><title>Syntax for meta-data</title><link href='style.css' rel='stylesheet' type='text/css' /></head><body><h1 id='syntax_for_metadata'>Syntax for meta-data</h1><p>This document describe a syntax that makes it possible to attach meta-data to block-level elements (headers, paragraphs, code blocks, ...), and to span-level elements (links, images, ...).</p><p>Last update: December 29th, 2006.</p><p><em>Table of contents:</em></p><blockquote><div class='maruku_toc'><ul style='list-style: none;'><li><span class='maruku_section_number'>1. </span><a href='#attribute_lists'>Attribute lists</a><ul style='list-style: none;'><li><span class='maruku_section_number'>1.1. </span><a href='#class_id'><tt style='background-color: #f0f0e0;'>id</tt> and <tt style='background-color: #f0f0e0;'>class</tt> are special</a></li></ul></li><li><span class='maruku_section_number'>2. </span><a href='#where_to_put_attribute_lists'>Where to put attribute lists</a><ul style='list-style: none;'><li><span class='maruku_section_number'>2.1. </span><a href='#for_blocklevel_elements'>For block-level elements</a></li><li><span class='maruku_section_number'>2.2. </span><a href='#for_headers'>For headers</a></li><li><span class='maruku_section_number'>2.3. </span><a href='#for_spanlevel_elements'>For span-level elements</a></li></ul></li><li><span class='maruku_section_number'>3. </span><a href='#using_tags'>Using "tags"</a></li><li><span class='maruku_section_number'>4. </span><a href='#additional_examples_and_cornercases'>Additional examples and corner-cases</a><ul style='list-style: none;'><li><span class='maruku_section_number'>4.1. </span><a href='#code_blocks'>Code blocks</a></li></ul></li><li><span class='maruku_section_number'>5. </span><a href='#grammar'>Formal grammar</a><ul style='list-style: none;'><li><span class='maruku_section_number'>5.1. </span><a href='#summary'>Summary</a></li></ul></li><li><span class='maruku_section_number'>6. </span><a href='#things_to_discuss'>Things to discuss</a></li></ul></div></blockquote><h2 id='attribute_lists'><span class='maruku_section_number'>1. </span>Attribute lists</h2><p>This is an example attribute list, which shows everything you can put inside:</p><pre style='background-color: #f0f0e0;'>{key1=val key2="long val" #myid .class1 .class2 tag1 tag2}
|
|
5
|
+
</pre><p>More in particular, an attribute list is a brace-enclosed, whitespace-separated list of elements of 4 different kinds:</p><ol><li>key/value pairs</li><li><a href='#using_tags'>tags</a> (<tt style='background-color: #f0f0e0;'>tag1</tt>,<tt style='background-color: #f0f0e0;'>tag2</tt>)</li><li><a href='#class_id'>id specifiers</a> (<tt style='background-color: #f0f0e0;'>#myid</tt>)</li><li><a href='#class_id'>class specifiers</a> (<tt style='background-color: #f0f0e0;'>.myclass</tt>)</li></ol><p>The formal grammar is specified <a href='#grammar'>below</a>.</p><h3 id='class_id'><span class='maruku_section_number'>1.1. </span><tt style='background-color: #f0f0e0;'>id</tt> and <tt style='background-color: #f0f0e0;'>class</tt> are special</h3><p>You can attach every attribute you want to elements, but some are threated in a special way:</p><ul><li><p><tt style='background-color: #f0f0e0;'>id</tt>: you can only have one ID specified for an element. ID must not conflict with one another.</p></li><li><p><tt style='background-color: #f0f0e0;'>class</tt>: class attributes are cumulative. It is possible to attach more that one class attribute to the same element (just like HTML).</p><p>In this case, the values get merged. So these are equivalent:</p><pre style='background-color: #f0f0e0;'>{.class1 .class2}
|
|
6
|
+
{class="class1 class2"}</pre></li></ul><p>For ID and classes there are special shortcuts:</p><ul><li><tt style='background-color: #f0f0e0;'>#myid</tt> is a shortcut for <tt style='background-color: #f0f0e0;'>id=myid</tt></li><li><tt style='background-color: #f0f0e0;'>.myclass</tt> is a shortcut for <tt style='background-color: #f0f0e0;'>class=myclass</tt></li></ul><p>Therefore the following attribute lists are equivalent:</p><pre style='background-color: #f0f0e0;'>{#myid .class1 .class2}
|
|
7
|
+
{id=myid class=class1 class=class2}
|
|
8
|
+
{id=myid class="class1 class2"}
|
|
9
|
+
|
|
10
|
+
</pre><h2 id='where_to_put_attribute_lists'><span class='maruku_section_number'>2. </span>Where to put attribute lists</h2><h3 id='for_blocklevel_elements'><span class='maruku_section_number'>2.1. </span>For block-level elements</h3><p>For paragraphs and other block-level elements, attributes lists go <strong>after</strong> the element:</p><pre style='background-color: #f0f0e0;'>This is a paragraph.
|
|
11
|
+
Line 2 of the paragraph.
|
|
12
|
+
{#myid .myclass}
|
|
13
|
+
|
|
14
|
+
A quote with a citation url:
|
|
15
|
+
> Who said that?
|
|
16
|
+
{cite=google.com}
|
|
17
|
+
</pre><p>Note: empty lines between the block and the attributes list are not tollerated. So this is not legal:</p><pre style='background-color: #f0f0e0;'>This is a paragraph.
|
|
18
|
+
Line 2 of the paragraph.
|
|
19
|
+
|
|
20
|
+
{#myid .myclass}
|
|
21
|
+
</pre><p>Attribute lists may be indented up to 3 spaces:</p><pre style='background-color: #f0f0e0;'>Paragraph1
|
|
22
|
+
¬{ok}
|
|
23
|
+
|
|
24
|
+
Paragraph2
|
|
25
|
+
¬¬{ok}
|
|
26
|
+
|
|
27
|
+
Paragraph2
|
|
28
|
+
¬¬¬{ok}
|
|
29
|
+
</pre><h3 id='for_headers'><span class='maruku_section_number'>2.2. </span>For headers</h3><p>For headers, you can put attribute lists on the same line:</p><pre style='background-color: #f0f0e0;'>### Header ### {#myid}
|
|
30
|
+
|
|
31
|
+
Header {#myid .myclass}
|
|
32
|
+
------
|
|
33
|
+
</pre><p>or, as other block-level elements, on the line after:</p><pre style='background-color: #f0f0e0;'>### Header ###
|
|
34
|
+
{#myid}
|
|
35
|
+
|
|
36
|
+
Header
|
|
37
|
+
------
|
|
38
|
+
{#myid .myclass}
|
|
39
|
+
</pre><h3 id='for_spanlevel_elements'><span class='maruku_section_number'>2.3. </span>For span-level elements</h3><p>For span-level elements, metadata goes immediately <strong>after</strong> in the paragraph flow.</p><p>For example, in this:</p><pre style='background-color: #f0f0e0;'>This is a *chunky paragraph*{#id1}.
|
|
40
|
+
{#id2}</pre><p>the ID of the <tt style='background-color: #f0f0e0;'>em</tt> element is set to <tt style='background-color: #f0f0e0;'>id1</tt> and the id of the paragraph is set to <tt style='background-color: #f0f0e0;'>id2</tt>.</p><p>This works also for links, like this:</p><pre style='background-color: #f0f0e0;'>This is [a link][ref]{#myid rel=abc rev=abc}
|
|
41
|
+
</pre><p>For images, this:</p><pre style='background-color: #f0f0e0;'>This is 
|
|
42
|
+
</pre><p>is equivalent to:</p><pre style='background-color: #f0f0e0;'>This is {title="fresh carrots"}
|
|
43
|
+
</pre><h2 id='using_tags'><span class='maruku_section_number'>3. </span>Using "tags"</h2><p>In an attribute list, you can have:</p><ol><li><tt style='background-color: #f0f0e0;'>key=value</tt> pairs,</li><li>id attributes (<tt style='background-color: #f0f0e0;'>#myid</tt>)</li><li>class attributes (<tt style='background-color: #f0f0e0;'>.myclass</tt>)</li></ol><p>Everything else is interpreted as a "tag" <sup id='fnref:1'><a href='#fn:1' rel='footnote'>1</a></sup>. Tags let you tag an element and then specify the attributes later:</p><pre style='background-color: #f0f0e0;'># Header # {tag}
|
|
44
|
+
|
|
45
|
+
Blah blah blah.
|
|
46
|
+
|
|
47
|
+
{tag}: #myhead .myclass lang=fr
|
|
48
|
+
</pre><p>Tags are not unique: more than one element can be assigned the same tag.</p><pre style='background-color: #f0f0e0;'># Header 1 # {tag}
|
|
49
|
+
...
|
|
50
|
+
# Header 2 # {tag}
|
|
51
|
+
|
|
52
|
+
{tag}: .myclass lang=fr
|
|
53
|
+
</pre><p>In this case, however, you should not assign the <tt style='background-color: #f0f0e0;'>id</tt> attribute. So this is <strong>not</strong> valid:</p><pre style='background-color: #f0f0e0;'># Header 1 # {tag}
|
|
54
|
+
...
|
|
55
|
+
# Header 2 # {tag}
|
|
56
|
+
|
|
57
|
+
{tag}: #myid .myclass lang=fr
|
|
58
|
+
|
|
59
|
+
</pre><p>Of course, tags are valid for both block-level and span-level elements:</p><pre style='background-color: #f0f0e0;'>### My header ### {1}
|
|
60
|
+
This is a paragraph with an *emphasis*{2}
|
|
61
|
+
a and the paragraph goes on.
|
|
62
|
+
{3}
|
|
63
|
+
|
|
64
|
+
{1}: #header_id
|
|
65
|
+
{2}: #emph_id
|
|
66
|
+
{3}: #par_id
|
|
67
|
+
|
|
68
|
+
</pre><h2 id='additional_examples_and_cornercases'><span class='maruku_section_number'>4. </span>Additional examples and corner-cases</h2><h3 id='code_blocks'><span class='maruku_section_number'>4.1. </span>Code blocks</h3><p>Note that attributes for code blocks should not be indented by more than 3 spaces:</p><pre style='background-color: #f0f0e0;'>¬¬¬¬This¬is¬a¬code¬block.
|
|
69
|
+
¬¬¬¬{#myid}¬<--¬this¬is¬part¬of¬the¬block
|
|
70
|
+
¬¬¬{#blockid}
|
|
71
|
+
|
|
72
|
+
</pre><h2 id='grammar'><span class='maruku_section_number'>5. </span>Formal grammar</h2><p>In this section we define the formal grammar AKA the big regexp.</p><p>In the spirit of HTML:</p><blockquote><p>Identifiers must begin with a letter (<tt style='background-color: #f0f0e0;'>[A-Za-z]</tt>) and may be followed by any number of letters, digits (<tt style='background-color: #f0f0e0;'>[0-9]</tt>), hyphens (<tt style='background-color: #f0f0e0;'>-</tt>), underscores (<tt style='background-color: #f0f0e0;'>_</tt>), colons (<tt style='background-color: #f0f0e0;'>:</tt>), and periods (<tt style='background-color: #f0f0e0;'>.</tt>).</p></blockquote><p>the same applies to class attributes and for the keys in key/value pairs. Moreover, they are case-sensitive.</p><p>So this is a valid attribute list:</p><pre style='background-color: #f0f0e0;'>{#my:_A123.veryspecialID .my:____:class }
|
|
73
|
+
</pre><p>The regexp for identifiers is therefore</p><pre style='background-color: #f0f0e0;'>Identifier = [A-Za-z][A-Za-z0-9_\.\:\-]*
|
|
74
|
+
</pre><p>(This is Ruby syntax; I am told it is similar to Perl's so I guess it is generally understandable. If not, please tell me the equivalent in your language.)</p><p>Now:</p><ul><li><p>an id attribute is an <tt style='background-color: #f0f0e0;'>Identifier</tt> preceded by <tt style='background-color: #f0f0e0;'>#</tt></p></li><li><p>a class attribute is an <tt style='background-color: #f0f0e0;'>Identifier</tt> preceded by <tt style='background-color: #f0f0e0;'>.</tt></p></li><li><p>a <tt style='background-color: #f0f0e0;'>Tag</tt> is an <tt style='background-color: #f0f0e0;'>Identifier</tt></p></li><li><p>A key/value pair is an Identifier, followed by a <tt style='background-color: #f0f0e0;'>=</tt>, followed by a value.</p><p>The value can be quoted (<tt style='background-color: #f0f0e0;'>key="Very long quote"</tt>) or unquoted (<tt style='background-color: #f0f0e0;'>key=small_value</tt>).</p><ul><li><p>An unquoted value must not start with a double quote <tt style='background-color: #f0f0e0;'>"</tt>, and may contain everything except whitespace:</p><pre style='background-color: #f0f0e0;'>UnquotedValue = [^\s\"][^\s]*
|
|
75
|
+
</pre><p>Example:</p><pre style='background-color: #f0f0e0;'>{key1=This=is"myValue_%&$&d9i key2=true}</pre></li><li><p>A quoted value is enclosed in double quotes and may contain every char. In a quoted value there are two escaping rules:</p><ol><li>The sequence <tt style='background-color: #f0f0e0;'> \\ </tt> is replaced by <tt style='background-color: #f0f0e0;'> \ </tt></li><li>The sequence <tt style='background-color: #f0f0e0;'>\"</tt> is replaced by <tt style='background-color: #f0f0e0;'>"</tt></li></ol><p>this makes it possible to include both <tt style='background-color: #f0f0e0;'>"</tt> and `` in the strings.</p><pre style='background-color: #f0f0e0;'>{key1="\\\" backslash and quote also a tab"}</pre></li></ul></li></ul><h3 id='summary'><span class='maruku_section_number'>5.1. </span>Summary</h3><p>To summarize:</p><pre style='background-color: #f0f0e0;'>AttributeList = \{ (ws [KeyValue|IdSpec|ClassSpec|Tag])* ws \}
|
|
76
|
+
Identifier = [A-Za-z][A-Za-z0-9_\.\:\-]*
|
|
77
|
+
Tag = Identifier
|
|
78
|
+
IdSpec = #Identifier
|
|
79
|
+
ClassSpec = .Identifier
|
|
80
|
+
KeyValue = Key=[QuotedValue|UnquotedValue]
|
|
81
|
+
Key = Identifier
|
|
82
|
+
UnquotedValue = [^\s\"][^\s]*
|
|
83
|
+
QuotedValue = \"[^\"]*\" <---------- note: simplistic
|
|
84
|
+
</pre><p><strong>Note</strong>: I am not able to write the regexp for <tt style='background-color: #f0f0e0;'>QuotedValue</tt> that takes into account also the escaping of the characters. Any regexp wizard out there?</p><h2 id='things_to_discuss'><span class='maruku_section_number'>6. </span>Things to discuss</h2><ul><li><p>Question: should we allow whitespace at the sides of <tt style='background-color: #f0f0e0;'>=</tt> in key/value pairs?</p></li><li><p>Question: should <tt style='background-color: #f0f0e0;'>:</tt> be a synonym for <tt style='background-color: #f0f0e0;'>=</tt> in attributes list.</p><p>Personally, I like this:</p><pre style='background-color: #f0f0e0;'>{key1: value key2: "value2 with spaces" }
|
|
85
|
+
</pre><p>much more than this:</p><pre style='background-color: #f0f0e0;'>{key1=value key2="value2 with spaces " }</pre></li><li><p>A syntax for creating <tt style='background-color: #f0f0e0;'>SPAN</tt> elements in the paragraphs and setting their attributes.</p><p>This is my proposal:</p><pre style='background-color: #f0f0e0;'>a long paragraph with {special words}{#myspan} that I want to
|
|
86
|
+
highlight
|
|
87
|
+
</pre><p>should originate the following HTML:</p><pre style='background-color: #f0f0e0;'><p>a long paragraph with <span id="myspan">special words</span>
|
|
88
|
+
that I want to highlight</p>
|
|
89
|
+
</pre><p>This is Michel's comment on this syntax:</p><blockquote><p>It looks quite good. One question is can it be amgibuous with braces used for the attributes themselves? I don't have an answer to that question; better ask this on the list.</p></blockquote><p>I don't think it is ambiguous, because it's the only case in which you have the sequence <tt style='background-color: #f0f0e0;'>}{</tt>:</p><pre style='background-color: #f0f0e0;'>{.*}{Attributes}
|
|
90
|
+
</pre><blockquote><p>Another question: does it makes sense to define <tt style='background-color: #f0f0e0;'><span></tt> within Markdown when you can't have <tt style='background-color: #f0f0e0;'><b></tt> and <tt style='background-color: #f0f0e0;'><i></tt>, or the more meaningful <tt style='background-color: #f0f0e0;'><cite></tt>, <tt style='background-color: #f0f0e0;'><q></tt>, <tt style='background-color: #f0f0e0;'><dfn></tt>, and <tt style='background-color: #f0f0e0;'><var></tt>? We have to draw the line somewhere, where should it be? Another good question for the list.</p></blockquote></li><li><p>anything else?</p></li></ul><div class='footnotes'><hr /><ol><li id='fn:1'><p>a better name for this?<a href='#fnref:1' rev='footnote'>↩</a></p></li></ol></div><div class='maruku_signature'><hr /><span style='font-size: small; font-style: italic'>Created by <a href='http://maruku.rubyforge.org' title='Maruku: a Markdown interpreter'>Maruku</a> at 17:00 on Friday, December 29th, 2006.</span></div></body></html>
|
data/docs/proposal.md
ADDED
|
@@ -0,0 +1,333 @@
|
|
|
1
|
+
CSS: style.css
|
|
2
|
+
LaTeX_use_listings: true
|
|
3
|
+
html_use_syntax: true
|
|
4
|
+
use_numbered_headers: true
|
|
5
|
+
|
|
6
|
+
Syntax for meta-data
|
|
7
|
+
====================
|
|
8
|
+
|
|
9
|
+
This document describe a syntax that makes it possible to attach meta-data to
|
|
10
|
+
block-level elements (headers, paragraphs, code blocks, ...),
|
|
11
|
+
and to span-level elements (links, images, ...).
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
Last update: December 29th, 2006.
|
|
15
|
+
|
|
16
|
+
*Table of contents:*
|
|
17
|
+
> @toc
|
|
18
|
+
> * Table of contents
|
|
19
|
+
|
|
20
|
+
Attribute lists
|
|
21
|
+
---------------
|
|
22
|
+
|
|
23
|
+
This is an example attribute list, which shows
|
|
24
|
+
everything you can put inside:
|
|
25
|
+
|
|
26
|
+
{key1=val key2="long val" #myid .class1 .class2 tag1 tag2}
|
|
27
|
+
|
|
28
|
+
More in particular, an attribute list is a brace-enclosed, whitespace-separated list
|
|
29
|
+
of elements of 4 different kinds:
|
|
30
|
+
|
|
31
|
+
1. key/value pairs
|
|
32
|
+
2. [tags](#using_tags) (`tag1`,`tag2`)
|
|
33
|
+
3. [id specifiers](#class_id) (`#myid`)
|
|
34
|
+
4. [class specifiers](#class_id) (`.myclass`)
|
|
35
|
+
|
|
36
|
+
The formal grammar is specified [below](#grammar).
|
|
37
|
+
|
|
38
|
+
### `id` and `class` are special ### {#class_id}
|
|
39
|
+
|
|
40
|
+
You can attach every attribute you want to elements, but
|
|
41
|
+
some are threated in a special way:
|
|
42
|
+
|
|
43
|
+
* `id`: you can only have one ID specified for an element.
|
|
44
|
+
ID must not conflict with one another.
|
|
45
|
+
|
|
46
|
+
* `class`: class attributes are cumulative.
|
|
47
|
+
It is possible to attach more that one class attribute
|
|
48
|
+
to the same element (just like HTML).
|
|
49
|
+
|
|
50
|
+
In this case, the values get merged. So these are equivalent:
|
|
51
|
+
|
|
52
|
+
{.class1 .class2}
|
|
53
|
+
{class="class1 class2"}
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
For ID and classes there are special shortcuts:
|
|
57
|
+
|
|
58
|
+
* `#myid` is a shortcut for `id=myid`
|
|
59
|
+
* `.myclass` is a shortcut for `class=myclass`
|
|
60
|
+
|
|
61
|
+
Therefore the following attribute lists are equivalent:
|
|
62
|
+
|
|
63
|
+
{#myid .class1 .class2}
|
|
64
|
+
{id=myid class=class1 class=class2}
|
|
65
|
+
{id=myid class="class1 class2"}
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
Where to put attribute lists
|
|
69
|
+
----------------------------
|
|
70
|
+
|
|
71
|
+
### For block-level elements ###
|
|
72
|
+
|
|
73
|
+
For paragraphs and other block-level elements, attributes lists go
|
|
74
|
+
**after** the element:
|
|
75
|
+
|
|
76
|
+
This is a paragraph.
|
|
77
|
+
Line 2 of the paragraph.
|
|
78
|
+
{#myid .myclass}
|
|
79
|
+
|
|
80
|
+
A quote with a citation url:
|
|
81
|
+
> Who said that?
|
|
82
|
+
{cite=google.com}
|
|
83
|
+
|
|
84
|
+
Note: empty lines between the block and the attributes list are not tollerated.
|
|
85
|
+
So this is not legal:
|
|
86
|
+
|
|
87
|
+
This is a paragraph.
|
|
88
|
+
Line 2 of the paragraph.
|
|
89
|
+
|
|
90
|
+
{#myid .myclass}
|
|
91
|
+
|
|
92
|
+
Attribute lists may be indented up to 3 spaces:
|
|
93
|
+
|
|
94
|
+
@ code_show_spaces
|
|
95
|
+
Paragraph1
|
|
96
|
+
{ok}
|
|
97
|
+
|
|
98
|
+
Paragraph2
|
|
99
|
+
{ok}
|
|
100
|
+
|
|
101
|
+
Paragraph2
|
|
102
|
+
{ok}
|
|
103
|
+
|
|
104
|
+
### For headers ###
|
|
105
|
+
|
|
106
|
+
For headers, you can put attribute lists on the same line:
|
|
107
|
+
|
|
108
|
+
### Header ### {#myid}
|
|
109
|
+
|
|
110
|
+
Header {#myid .myclass}
|
|
111
|
+
------
|
|
112
|
+
|
|
113
|
+
or, as other block-level elements, on the line after:
|
|
114
|
+
|
|
115
|
+
### Header ###
|
|
116
|
+
{#myid}
|
|
117
|
+
|
|
118
|
+
Header
|
|
119
|
+
------
|
|
120
|
+
{#myid .myclass}
|
|
121
|
+
|
|
122
|
+
### For span-level elements ###
|
|
123
|
+
|
|
124
|
+
For span-level elements, metadata goes immediately **after** in the paragraph
|
|
125
|
+
flow.
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
For example, in this:
|
|
129
|
+
|
|
130
|
+
This is a *chunky paragraph*{#id1}.
|
|
131
|
+
{#id2}
|
|
132
|
+
|
|
133
|
+
the ID of the `em` element is set to `id1`
|
|
134
|
+
and the id of the paragraph is set to `id2`.
|
|
135
|
+
|
|
136
|
+
This works also for links, like this:
|
|
137
|
+
|
|
138
|
+
This is [a link][ref]{#myid rel=abc rev=abc}
|
|
139
|
+
|
|
140
|
+
For images, this:
|
|
141
|
+
|
|
142
|
+
This is 
|
|
143
|
+
|
|
144
|
+
is equivalent to:
|
|
145
|
+
|
|
146
|
+
This is {title="fresh carrots"}
|
|
147
|
+
|
|
148
|
+
Using "tags" {#using_tags}
|
|
149
|
+
------------
|
|
150
|
+
|
|
151
|
+
In an attribute list, you can have:
|
|
152
|
+
1. `key=value` pairs,
|
|
153
|
+
2. id attributes (`#myid`)
|
|
154
|
+
3. class attributes (`.myclass`)
|
|
155
|
+
|
|
156
|
+
Everything else is interpreted as a "tag" [^tag].
|
|
157
|
+
Tags let you tag an element and then specify
|
|
158
|
+
the attributes later:
|
|
159
|
+
|
|
160
|
+
# Header # {tag}
|
|
161
|
+
|
|
162
|
+
Blah blah blah.
|
|
163
|
+
|
|
164
|
+
{tag}: #myhead .myclass lang=fr
|
|
165
|
+
|
|
166
|
+
Tags are not unique: more than one element can
|
|
167
|
+
be assigned the same tag.
|
|
168
|
+
|
|
169
|
+
# Header 1 # {tag}
|
|
170
|
+
...
|
|
171
|
+
# Header 2 # {tag}
|
|
172
|
+
|
|
173
|
+
{tag}: .myclass lang=fr
|
|
174
|
+
|
|
175
|
+
In this case, however, you should not assign
|
|
176
|
+
the `id` attribute. So this is **not** valid:
|
|
177
|
+
|
|
178
|
+
# Header 1 # {tag}
|
|
179
|
+
...
|
|
180
|
+
# Header 2 # {tag}
|
|
181
|
+
|
|
182
|
+
{tag}: #myid .myclass lang=fr
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
[^tag]: a better name for this?
|
|
186
|
+
|
|
187
|
+
Of course, tags are valid for both block-level and span-level elements:
|
|
188
|
+
|
|
189
|
+
### My header ### {1}
|
|
190
|
+
This is a paragraph with an *emphasis*{2}
|
|
191
|
+
a and the paragraph goes on.
|
|
192
|
+
{3}
|
|
193
|
+
|
|
194
|
+
{1}: #header_id
|
|
195
|
+
{2}: #emph_id
|
|
196
|
+
{3}: #par_id
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
Additional examples and corner-cases
|
|
200
|
+
------------------------------------
|
|
201
|
+
|
|
202
|
+
### Code blocks ###
|
|
203
|
+
|
|
204
|
+
Note that attributes for code blocks should not be indented
|
|
205
|
+
by more than 3 spaces:
|
|
206
|
+
|
|
207
|
+
@ code_show_spaces
|
|
208
|
+
This is a code block.
|
|
209
|
+
{#myid} <-- this is part of the block
|
|
210
|
+
{#blockid}
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
Formal grammar {#grammar}
|
|
214
|
+
--------------
|
|
215
|
+
|
|
216
|
+
In this section we define the formal grammar AKA the big regexp.
|
|
217
|
+
|
|
218
|
+
In the spirit of HTML:
|
|
219
|
+
|
|
220
|
+
> Identifiers must begin with a letter (`[A-Za-z]`) and
|
|
221
|
+
> may be followed by any number of letters, digits (`[0-9]`),
|
|
222
|
+
> hyphens (`-`), underscores (`_`), colons (`:`), and periods (`.`).
|
|
223
|
+
|
|
224
|
+
the same applies to class attributes and for the keys in key/value pairs.
|
|
225
|
+
Moreover, they are case-sensitive.
|
|
226
|
+
|
|
227
|
+
So this is a valid attribute list:
|
|
228
|
+
|
|
229
|
+
{#my:_A123.veryspecialID .my:____:class }
|
|
230
|
+
|
|
231
|
+
The regexp for identifiers is therefore
|
|
232
|
+
|
|
233
|
+
Identifier = [A-Za-z][A-Za-z0-9_\.\:\-]*
|
|
234
|
+
|
|
235
|
+
(This is Ruby syntax; I am told it is similar to Perl's so I guess
|
|
236
|
+
it is generally understandable. If not, please tell me the equivalent
|
|
237
|
+
in your language.)
|
|
238
|
+
|
|
239
|
+
Now:
|
|
240
|
+
* an id attribute is an `Identifier` preceded by `#`
|
|
241
|
+
* a class attribute is an `Identifier` preceded by `.`
|
|
242
|
+
* a `Tag` is an `Identifier`
|
|
243
|
+
|
|
244
|
+
* A key/value pair is an Identifier, followed by a `=`, followed by
|
|
245
|
+
a value.
|
|
246
|
+
|
|
247
|
+
The value can be quoted (`key="Very long quote"`) or unquoted (`key=small_value`).
|
|
248
|
+
|
|
249
|
+
* An unquoted value must not start with a double quote `"`, and may contain everything
|
|
250
|
+
except whitespace:
|
|
251
|
+
|
|
252
|
+
UnquotedValue = [^\s\"][^\s]*
|
|
253
|
+
|
|
254
|
+
Example:
|
|
255
|
+
|
|
256
|
+
{key1=This=is"myValue_%&$&d9i key2=true}
|
|
257
|
+
|
|
258
|
+
* A quoted value is enclosed in double quotes and may contain every char.
|
|
259
|
+
In a quoted value there are two escaping rules:
|
|
260
|
+
|
|
261
|
+
1. The sequence ` \\ ` is replaced by ` \ `
|
|
262
|
+
2. The sequence `\"` is replaced by `"`
|
|
263
|
+
|
|
264
|
+
this makes it possible to include both `"` and `\` in the strings.
|
|
265
|
+
|
|
266
|
+
{key1="\\\" backslash and quote also a tab"}
|
|
267
|
+
|
|
268
|
+
### Summary ###
|
|
269
|
+
|
|
270
|
+
To summarize:
|
|
271
|
+
|
|
272
|
+
AttributeList = \{ (ws [KeyValue|IdSpec|ClassSpec|Tag])* ws \}
|
|
273
|
+
Identifier = [A-Za-z][A-Za-z0-9_\.\:\-]*
|
|
274
|
+
Tag = Identifier
|
|
275
|
+
IdSpec = #Identifier
|
|
276
|
+
ClassSpec = .Identifier
|
|
277
|
+
KeyValue = Key=[QuotedValue|UnquotedValue]
|
|
278
|
+
Key = Identifier
|
|
279
|
+
UnquotedValue = [^\s\"][^\s]*
|
|
280
|
+
QuotedValue = \"[^\"]*\" <---------- note: simplistic
|
|
281
|
+
|
|
282
|
+
**Note**: I am not able to write the regexp for `QuotedValue` that takes into
|
|
283
|
+
account also the escaping of the characters. Any regexp wizard out there?
|
|
284
|
+
|
|
285
|
+
Things to discuss
|
|
286
|
+
-----------------
|
|
287
|
+
|
|
288
|
+
* Question: should we allow whitespace at the sides of `=` in key/value pairs?
|
|
289
|
+
|
|
290
|
+
* Question: should `:` be a synonym for `=` in attributes list.
|
|
291
|
+
|
|
292
|
+
Personally, I like this:
|
|
293
|
+
|
|
294
|
+
{key1: value key2: "value2 with spaces" }
|
|
295
|
+
|
|
296
|
+
much more than this:
|
|
297
|
+
|
|
298
|
+
{key1=value key2="value2 with spaces " }
|
|
299
|
+
|
|
300
|
+
|
|
301
|
+
* A syntax for creating `SPAN` elements in the paragraphs and setting their
|
|
302
|
+
attributes.
|
|
303
|
+
|
|
304
|
+
This is my proposal:
|
|
305
|
+
|
|
306
|
+
a long paragraph with {special words}{#myspan} that I want to
|
|
307
|
+
highlight
|
|
308
|
+
|
|
309
|
+
should originate the following HTML:
|
|
310
|
+
|
|
311
|
+
<p>a long paragraph with <span id="myspan">special words</span>
|
|
312
|
+
that I want to highlight</p>
|
|
313
|
+
|
|
314
|
+
This is Michel's comment on this syntax:
|
|
315
|
+
|
|
316
|
+
> It looks quite good. One question is can it be amgibuous with braces
|
|
317
|
+
> used for the attributes themselves? I don't have an answer to that
|
|
318
|
+
> question; better ask this on the list.
|
|
319
|
+
|
|
320
|
+
I don't think it is ambiguous, because it's the only case in which you have
|
|
321
|
+
the sequence `}{`:
|
|
322
|
+
|
|
323
|
+
{.*}{Attributes}
|
|
324
|
+
|
|
325
|
+
> Another question: does it makes sense to define `<span>` within
|
|
326
|
+
> Markdown when you can't have `<b>` and `<i>`, or the more meaningful
|
|
327
|
+
> `<cite>`, `<q>`, `<dfn>`, and `<var>`? We have to draw the line somewhere,
|
|
328
|
+
> where should it be? Another good question for the list.
|
|
329
|
+
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
* anything else?
|
|
333
|
+
|