EXAMPLE BLOG POST

h2 is the largest heading in the blog post content, h1 is reserved for the title of the post

The table of contents is automatically generated from the headings in the text.

You can use normal HTML markup, such as: <p>, <ul>, <li>, <img>, and so on to create your blog post. No special classes are needed to create a nice formatting.

You can, of course, add specific styling to elements by using the style attribute of your tag. That's how the next paragraph is darkblue with an aquamarine background and 10px of padding.

<p style="color: darkblue; background-color: aquamarine; padding: 10px;">
  ...
</p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

• Lorem ipsum dolor sit amet, consetetur sadipscing elitr
• Lorem ipsum dolor sit amet, consetetur sadipscing elitr
• Lorem ipsum dolor sit amet, consetetur sadipscing elitr
• Lorem ipsum dolor sit amet, consetetur sadipscing elitr
• Lorem ipsum dolor sit amet, consetetur sadipscing elitr

h3 is the smallest heading that still appears in the table of contents

1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
4. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
5. Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Code examples

Code blocks can be added using the standard HTML syntax of wrapping a <code> tag in a <pre> tag as such:

<pre><code class="language-html">Your code here</code></pre>

Syntax highlighting works by giving the <code> tag a language class. E.g. "language-html", to display HTML syntax highlighting, like in the example above, or "language-python", for python syntax highlighting, and so on.

if language == "python":
    print('This is python syntax highlighting!')

Inline code, is also easy, just wrap a <code> tag with a language class around your code.

The syntax highlighting is powered by prism.js, see its documentation for a full list of features.

Images and figures

Images should be placed in the nlphd/static/img folder or its subfolders. Then you can add them into your markup with the <img> tag.

Alternatively, the <figure> tag can be used to create a figure with a figure caption. The following code creates the figure and caption seen below the code:

<figure>
  <img src="/nlpgroup/static/img/news/kv_library.jpg" alt="Image of a library.">
  <figcaption>Image of a woman reading a book in a library.</figcaption>
</figure>

How to create footnotes and references

Footnotes can be added by wrapping an <a> tag in a <sup> tag at the relevant place in your paragraph. This will add the reference link into the text. Then, you can add a footnote at the bottom of your page with the content of the footnote. E.g., you can create an ordered list (<ol>) and put the footnotes into <li> tags. The important detail to make it all work is that the <a> tag of the footnote reference links to the <li> tag of the footnote content. You can also create references to e.g. publications in the same way.

Code for the footnote reference in the text.

<p>
  ... <sup><a href="#fn:1"></a></sup> ...
</p>

Code for the footnote content at the bottom of the page.

<ol>
  <li id="fn:1">This is an example of a footnote!</li>
</ol>

Math

Math can be displayed inline (e.g. \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\)) or as a block (see below). MathJax is used for rendering the math. MathJax supports \(\LaTeX\) notation. You can create inline math by wrapping your \(\LaTeX\) code between a \( and a \). For block math, just wrap your \(\LaTeX\) code between two $$.

$$ f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz $$

Footnotes

1. This is an example of a footnote!