{% extends 'main/layout.html' %}

{% load static %}

{% block title %}Markdown Guide{% endblock %}

{% block content %}
<main>
    <h1 id="markdown-guide">Markdown Guide</h1>
    <p>
        BōcPress supports Markdown in the blog posts body. Markdown is a very
        simple formatting language.
    </p>

    <h2 id="italics">Italics</h2>
    <p>
        One can use *asterisks* between words for <i>italics</i>.
    </p>

    <h2 id="bold">Bold</h2>
    <p>
        One can use **double asterisks* for <strong>bold letters</strong>.
    </p>

    <h2 id="image">Image</h2>
    <div>
        <img src="{% static 'favicon.png' %}" alt="orange dot">
    </div>
    <p style="margin-top: 0;">
        To display an image (such as the above dot), write:
        <br>![image description - orange dot](https://mataroa.blog/static/favicon.png)
    </p>

    <h2 id="links">Links</h2>
    <p>
        Write a link like this: [website link](https://sourcehut.org/)
        <br>for it to appear like this <a href="https://sourcehut.org/">website link</a>.
    </p>

    <h2 id="headings">Headings</h2>
    <p>
        Headings on markdown are defined in a hierarchy of 6 levels. Heading level 1
        is the main title, heading level 2 a secondary, under level 1, heading 3
        tertiary under level 2, et al.
    </p>
    <p>
        Each level is defined with the number of hash signs as prefixes. Eg:
        <br>
        <code># Markdown Guide</code>
        or
        <code>## Italics</code>.
    </p>

    <h2 id="monospace-font">Monospace font</h2>
    <p>
        For a monospace font `use backticks`; it will appear <code>like this</code>.
    </p>

    <h2 id="line-breaks">Line breaks</h2>
    <p>
        To change lines without changing paragraphs, one can add two spaces at the end of
        the line, and then continue below. Example:
        <pre><code>0:00&lt;space&gt;&lt;space&gt;
This is the second line</code></pre>
    </p>

    <h2 id="footnotes">Footnotes</h2>
    <p>
        To add a footnote, use the following notation:
    </p>
    <p>
        1. On the main text, just after the word you want to have the footnote
        superscript, add a word as reference, eg: <code>[^picaso]</code>
    </p>
    <p>
        2. At the end of the post, add the footnote content, on its own line,
        as such:
        <br>
        <code>[^picaso]: Pablo Ruiz Picasso was born on October 25th, 1881.</code>
    </p>
    <p>
        When saved, this will automatically create the numbering and make them
        links. NB: the square brackets, the caret, and the colon are important
        parts of the syntax.
    </p>

    <h2 id="In-page links">In-page links</h2>
    <p>
        Every heading has an anchor automatically attached to it. For example:
        <br>
        <code>## Footnotes</code> is <code>#footnotes</code>
        <br>
        <code>## Table of Contents</code> is <code>#table-of-contents</code>
    </p>
    <p>
        One can create markdown links with the anchors as targets. Eg:
        <code>[Bold](#bold)</code> will become
        <a href="#bold">Bold</a>. This enables jumping between parts of
        a single post and can be used to create a table of contents as well.
    </p>

</main>

{% include 'partials/footer.html' %}

{% endblock content %}