rDrama/files/templates/formatting.html

213 lines
4.5 KiB
HTML

{% extends "default.html" %}
{% block title %}
<title>{{'SITE_NAME' | app_config}} - Formatting</title>
<meta name="description" content="{{'SITE_NAME' | app_config}} Formatting">
{% endblock %}
{% block content %}
<pre>
</pre>
{% filter markdown %}
# Formatting
On {{'SITE_NAME' | app_config}}, you can use Markdown formatting.
## Inline formatting
{% endfilter %}
<table class="table table-striped mb-5">
<thead class="bg-primary text-white">
<tr>
<th>Name</th>
<th>Type</th>
<th>Displays as</th>
</tr>
</thead>
<tr>
<td>Italics</td>
<td>*text*</td>
<td><i>text</i></td>
</tr>
<tr>
<td>Bold</td>
<td>**text**</td>
<td><b>text</b></td>
</tr>
<tr>
<td>Code</td>
<td>`text`</td>
<td><code>text</code></td>
</tr>
<tr>
<td>Strikethrough</td>
<td>~~text~~</td>
<td><del>text</del></td>
</tr>
<tr>
<td>Links</td>
<td>[{{'SITE_NAME' | app_config}}]({{request.host_url}})</td>
<td><a href="{{request.host_url}}">{{'SITE_NAME' | app_config}}</a></td>
</tr>
<tr>
<td>Emojis</td>
<td>:marseylove:</td>
<td><img loading="lazy" data-bs-toggle="tooltip" alt=":marseylove:" title=":marseylove:" delay="0" height="20" src="/assets/images/emojis/marseylove.webp"></td>
</tr>
<tr>
<td>Mirrored Emojis</td>
<td>:!marseylove:</td>
<td><img loading="lazy" data-bs-toggle="tooltip" class="mirrored" alt=":!marseylove:" title=":!marseylove:" delay="0" height="20" src="/assets/images/emojis/marseylove.webp"></td>
</tr>
<tr>
<td>Poll Options</td>
<td>$bussy$</td>
<td>
<div class="custom-control">
<input type="checkbox" class="custom-control-input" id="422741" name="option">
<label class="custom-control-label" for="422741">bussy - <a href="/votes?link=t3_422741"><span id="poll-422741">0</span> votes</a></label>
</div>
</td>
</tr>
</table>
{% filter markdown %}
## Block formatting
These Markdown tags format an entire paragraph of text at a time.
<table class="table table-striped mb-5">
<thead class="bg-primary text-white">
<tr>
<th>Name</th>
<th>Type</th>
<th>Displays as</th>
</tr>
</thead>
<tr>
<td>Blockquote</td>
<td>&gt; text</td>
<td><blockquote>text</blockquote></td>
</tr>
<tr>
<td>Headers 1-6</td>
<td># Header 1<br>## Header 2<br>### Header 3<br>#### Header 4<br>##### Header 5<br>###### Header 6</td>
<td><h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3><h4>Header 4</h4><h5>Header 5</h5><h6>Header 6</h6></td>
</tr>
<tr>
<td>Ordered list</td>
<td>1. First thing<br>2. Second thing</td>
<td><ol><li>First thing</li><li>Second thing</li></ol></td>
</tr>
<tr>
<td>Unordered list</td>
<td>* First thing<br>* Second thing</td>
<td><ul><li>First thing</li><li>Second thing</li></ul></td>
</tr>
<tr>
<td>Code Block</td>
<td>```<br>Use three backticks above and below.<br>Or, indent the lines with four spaces.<br>```</td>
<td>
</tr>
<tr>
<td>Spoilers</td>
<td>&lt;s&gt; bussy > gussy &lt;/s&gt;</td>
<td><p class="spoiler">bussy > gussy</p></td>
<pre>
Use three backticks above and below.
Or, indent the lines with four spaces.
</pre>
</td>
</tr>
</table>
## Custom Formatting
We also have some custom hooks for mentioning users and subreddits. Note that these only work if the mentioned user or subreddit actually exists.
{% endfilter %}
<table class="table table-striped mb-5">
<thead class="bg-primary text-white">
<tr>
<th>Name</th>
<th>Type</th>
<th>Displays as</th>
</tr>
</thead>
<tr>
<td>Username Mention</td>
<td>@QuadNarca</td>
<td><a class="d-inline-block" href="/@QuadNarca"><img loading="lazy" src="/@QuadNarca/pic/profile" class="profile-pic-20 mr-1">@QuadNarca</a></td>
</tr>
<tr>
<td>Subreddit Mention</td>
<td>r/{{'SITE_NAME' | app_config}}</td>
<td><a class="d-inline-block" rel="nofollow noopener noreferrer" href="https://www.reddit.com/r/{{'SITE_NAME' | app_config}}/">r/{{'SITE_NAME' | app_config}}</a></td>
</tr>
<tr>
<td>Redditor Mention</td>
<td>u/Bardfinn</td>
<td><a class="d-inline-block" rel="nofollow noopener noreferrer" href="https://www.reddit.com/u/Bardfinn/">u/Bardfinn</a></td>
</tr>
</table>
{% filter markdown %}
## Custom HTML
And we allow custom HTML in most places.
Allowed tags:
- b
- blockquote
- br
- code
- del
- em
- h1
- h2
- h3
- h4
- h5
- h6
- hr
- i
- li
- ol
- p
- pre
- strong
- sub
- sup
- table
- tbody
- th
- thead
- td
- tr
- ul
- marquee
- a
- img
- span
Allowed styles:
- color
- font-weight
- transform
{% endfilter %}
{% include "expanded_image_modal.html" %}
{% endblock %}