Snippets
This page contains a list of useful snippets that can be used in your Markdown files.
Note that any Markdown or Kramdown notation will work right out-of-the-box.
As ScholarMarkdown internally supports Kramdown (an extension of Markdown), you can add CSS attributes to text via the curly bracket notation ({:my-attribute}). The default template CSS includes several convenience classes (shared.css), such as TODOs, comments, and reviewing statements.
For inline attributes, the curly brackets need to come after the inline element.
Input:
This is a paragraph.
_This sentence are badly grammared_{:.grammar}.
The evaluation shows that we are better in _X%_{:.todo} of the cases*.*{:.reference.needed}.
Output:
<p>This is a paragraph.
<em class="grammar">This sentence are badly grammared</em>.
The evaluation shows that we are better in <em class="todo">X%</em> of the cases<em class="reference needed">.</em>.</p>For block-level elements, the curly brackets need to come after the block-level element.
Input:
This is a paragraph.
>Please write a quote here
{:.todo}
Please write a paragraph here
{:.todo}
Output:
<p>This is a paragraph.</p>
<blockquote>
<p class="todo">Please write a quote here</p>
</blockquote>
<p class="todo">Please write a paragraph here</p>
Requires the Citation module.
Input:
Have you heard about the [Semantic Web](cite:cites semanticweb)?
Output:
Have you heard about the Semantic Web [1]?
For each citation that is made, a reference will be added to a References section.
This requires a semanticweb bibtex entry to exist in your references.bib file, as for example:
@article{semanticweb,
title = {The semantic web},
author = {Berners-Lee, Tim and Hendler, James and Lassila, Ora and others},
journal = {Scientific American},
volume = {284},
number = {5},
pages = {28--37},
year = {2001},
publisher = {New York, NY, USA:}
}LaTeX math equations are one of the most powerful ways to write mathematical equations.
This requires the math-mode module to be enabled.
Equation block:
$$c = \pm\sqrt{a^2 + b^2 + caaa}$$
Inline equation:
\$$ 5 + 5 $$
Complex equation wrapped in a figure block:
<figure id="my-equation" class="equation" markdown="1">
$$
\begin{aligned}
& \phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right)
= \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) = \\
& (x_1, \ldots, x_n) \left( \begin{array}{ccc}
\phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\
\vdots & \ddots & \vdots \\
\phi(e_n, e_1) & \cdots & \phi(e_n, e_n)
\end{array} \right)
\left( \begin{array}{c}
y_1 \\
\vdots \\
y_n
\end{array} \right)
\end{aligned}
$$
<figcaption markdown="block">
That's a complex equation!
</figcaption>
</figure>
Input:
Write this text!
{:.todo}
Output:
TODO: Write this text!
Input:
{:.comment data-author="RT"}
This is a comment about the text.
<del class="comment" data-author="RT">
This is something that must be deleted.
</del>
Output:
[RT: This is a comment about the text.]
<strike>This is a comment about the text. (RT)</strike>
Optionally, you can specify the type of comment as follows:
{:.comment .spelling data-author="RT"}
This is a comment on spelling.
{:.comment .grammar data-author="RT"}
This is a comment on grammar.
{:.comment .rephrase data-author="RT"}
This is something that needs rephrasing.
{:.comment .reference.needed data-author="RT"}
Something that needs a reference.
Input:
<figure id="my-figure">
<img src="img/my-figure.png" alt="[My Figure]">
<figcaption markdown="block">
This is a nice figure!
</figcaption>
</figure>
Output:
<figure id="my-figure">
<img src="img/my-figure.png" alt="[My Figure]" />
<figcaption>
<p><span class="label">Fig. 5:</span> This is a nice figure!</p>
</figcaption>
</figure>
This figure will be referenceable with the notation [](#my-figure), which will output Fig. 5.
Subfigures can also be included in a figure by giving them a subfigure class:
<figure id="figure-main">
<figure id="figure-main-1" class="subfigure">
<img src="a.png">
<figcaption markdown="block">
Subfigure 1
</figcaption>
</figure>
<figure id="figure-main-2" class="subfigure">
<img src="b.png">
<figcaption markdown="block">
Subfigure 2
</figcaption>
</figure>
<figcaption markdown="block">
Two figures
</figcaption>
</figure>
Input:
<figure id="my-code" class="listing">
````/code/my-code.js````
<figcaption markdown="block">
This is some nice code!
</figcaption>
</figure>
Output:
<figure id="my-code" class="listing">
<pre><code>console.log('Hello world!');</code></pre>
<figcaption>
<p><span class="label">Listing 1:</span> This is some nice code!</p>
</figcaption>
</figure>
This figure will be referenceable with the notation [](#my-code), which will output Listing 1.
When you are writing articles, you sometimes want to include something that should not be part of the main text, but should nevertheless be mentioned somehow. For this, footnotes are typically used.
Footnotes are typically placed at the end of a (printed) page, but as multiple printed pages do not make much sense on the Web, ScholarMarkdown collects all footnotes in one Footnotes section in the footer. This is a compromise between print-centric footnotes, and HTML aside tags.
Input:
The framework will call you when needed[^HollywoodPrinciple].
[^HollywoodPrinciple]: This concept is also know as the: <q>Don't call us, we'll call you</q>
Warning: Make sure the footnote content is defined on a separate line, the footnote will not be recognised otherwise.
Output:
The framework will call you when needed<sup id="fnref:HollywoodPrinciple"><a href="#fn:HollywoodPrinciple" class="footnote">1</a></sup>.
...
<footer>
<section id="footnotes">
<h2>Footnotes</h2>
<ol>
<li id="fn:HollywoodPrinciple">
<p>This concept is also know as the: <q>Don’t call us, we’ll call you</q> <a href="#fnref:HollywoodPrinciple" class="reversefootnote">↩</a></p>
</li>
</ol>
</section>
</footer>
Some basic CSS classes are available that offer specific functionality:
-
printonly: This content will only be shown in print-mode. -
no-label-increment: Sections and figures with this class will not be numbered. (e.g. for acknowledgement sections)