Snippets

Ruben Taelman edited this page Jun 5, 2018 · 10 revisions

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.

Custom CSS visualizations with Kramdown

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.

Inline attributes

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>

Block attributes

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>

Citations

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

Math equations

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>

Todos

Input:

Write this text!
{:.todo}

Output:

TODO: Write this text!

Comments

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

<strikethrough>This is a comment about the text. (RT)</strikethrough>

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.

Figures

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.

Code

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.

Footnotes

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>

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>&nbsp;<a href="#fnref:HollywoodPrinciple" class="reversefootnote">&#8617;</a></p>
      </li>
    </ol>
  </section>
</footer>
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.