{% load markdown_filters %}

<div class="panel panel-default">
    <div class="panel-body">
        <h1>
            Texts
        </h1>
        <h3>
            Bold
        </h3>
        <p>
            Surrounding text with double asterisks makes it bold, highlighting it with a stronger emphasis.
        </p>
        <pre><code>**This text will be bold.**</code></pre>
        <h4>
            Example
        </h4>
        <b>This text will be bold.</b>
        <hr>

        <h3>
            Italic
        </h3>
        <p>
            Placing text between single asterisks makes it italic, giving it a slanted appearance to denote emphasis or a different meaning.
        </p>
        <pre><code>*This text will be italic.*</code></pre>
        <h4>
            Example
        </h4>
        <i>This text will be italic.</i>
        <hr>

        <h3>
            Underline
        </h3>
        {{ "alert:warning:**Warning:** This feature sometimes results in weird results. Use with caution."|markdown|safe }}
        <p>
            Wrapping text with double underscores underlines it, indicating emphasis or a hyperlink-like style.
        </p>
        <pre><code>__ This text will be underlined. __</code></pre>
        <h4>
            Example
        </h4>
        <u>
            This text will be underlined.
        </u>
        <hr>

        <h3>
            Strikethrough
        </h3>
        <p>
            Enclosing text in double tildes strikes it through, indicating that it is no longer valid or relevant.
        </p>
        <pre><code>~~This text will be striked through.~~</code></pre>
        <h4>
            Example
        </h4>
        <del>
            This text will be striked through.
        </del>
        <hr>
        
        <h3>
            Links
        </h3>
        <p>
            Placing a URL in the form of a hyperlink directly (e.g., https://google.com) creates a clickable link to the specified URL.
        </p>
        <pre><code>https://google.com</code></pre>
        <h4>
            Example
        </h4>
        <a href="https://google.com">https://google.com</a>
        <hr>

        <h3>
            Links with custom text
        </h3>
        <p>
            Creating links with custom text involves enclosing the desired display text within square brackets, followed immediately by the URL in parentheses. This way, the custom text serves as the clickable link.
        </p>
        <pre><code>[Google.com](https://google.com)</code></pre>
        <h4>
            Example
        </h4>
        <a href="https://google.com">Google.com</a>
        <hr>

        <h3>
            Superscript
        </h3>
        <p>
            Text can be formatted as superscript by enclosing it within the caret symbol (^), typically used for mathematical equations or footnotes.
        </p>
        <pre><code>Hello^superscript^</code></pre>
        <h4>
            Example
        </h4>
        Hello<sup>superscript</sup>
        <hr>

        <h3>
            Subscript
        </h3>
        <p>
            Text can be formatted as subscript by enclosing it within the tilde symbol (~), often used for chemical formulas or mathematical notation.
        </p>
        <pre><code>CH~3~CH~2~OH</code></pre>
        <h4>
            Example
        </h4>
        CH<sub>3</sub>CH<sub>2</sub>OH
        <hr>

        <h3>
            Footnotes
        </h3>
        <p>
            Footnotes allow additional information or references to be added to the text without interrupting the flow. Typically denoted with a number or a symbol, footnotes are referenced within the text and appear at the bottom of the page or document.
        </p>
        <pre><code>content in paragraph with footnote[^1] markup.

[^1]: footnote explain</code></pre>
        <h4>
            Example
        </h4>
        <p>content in paragraph with footnote<sup class="footnote-ref" id="fnref-1"><a href="#fn-1">1</a></sup> markup.</p>
        <section class="footnotes">
            <ol>
                <li id="fn-1"><p>footnote explain<a href="#fnref-1" class="footnote">↩</a></p></li>
            </ol>
        </section>
        <hr>

        <h3>
            Horizontal Line
        </h3>
        <p>
            A horizontal line is created by typing three or more hyphens, underscores, or asterisks on a new line. It is used to visually separate sections or content within a document.
        </p>
        <pre><code>---</code></pre>
        <h4>
            Example
        </h4>
    </div>
</div>