forked from MarseyWorld/MarseyWorld
Formatting page, added tables for html formatting and styles.
not-a-code-cel
parent
c89b314c05
commit
b7af7c7b1e
|
|
@ -27,52 +27,53 @@ On {{'SITE_NAME' | app_config}}, you can use Markdown formatting.
|
||||||
<th>Displays as</th>
|
<th>Displays as</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>Italics</td>
|
<tr>
|
||||||
<td>*text*</td>
|
<td>Italics</td>
|
||||||
<td><i>text</i></td>
|
<td>*text*</td>
|
||||||
</tr>
|
<td><i>text</i></td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>Bold</td>
|
<tr>
|
||||||
<td>**text**</td>
|
<td>Bold</td>
|
||||||
<td><b>text</b></td>
|
<td>**text**</td>
|
||||||
</tr>
|
<td><b>text</b></td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>Code</td>
|
<tr>
|
||||||
<td>`text`</td>
|
<td>Code</td>
|
||||||
<td><code>text</code></td>
|
<td>`text`</td>
|
||||||
</tr>
|
<td><code>text</code></td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>Strikethrough</td>
|
<tr>
|
||||||
<td>~~text~~</td>
|
<td>Strikethrough</td>
|
||||||
<td><del>text</del></td>
|
<td>~~text~~</td>
|
||||||
</tr>
|
<td><del>text</del></td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>Links</td>
|
<tr>
|
||||||
<td>[{{'SITE_NAME' | app_config}}]({{request.host_url}})</td>
|
<td>Links</td>
|
||||||
<td><a href="{{request.host_url}}">{{'SITE_NAME' | app_config}}</a></td>
|
<td>[{{'SITE_NAME' | app_config}}]({{request.host_url}})</td>
|
||||||
</tr>
|
<td><a href="{{request.host_url}}">{{'SITE_NAME' | app_config}}</a></td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>Emojis</td>
|
<tr>
|
||||||
<td>:marseylove:</td>
|
<td>Emojis</td>
|
||||||
<td><img loading="lazy" data-bs-toggle="tooltip" alt=":marseylove:" title=":marseylove:" delay="0" height="20" src="/assets/images/emojis/marseylove.webp"></td>
|
<td>:marseylove:</td>
|
||||||
</tr>
|
<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>
|
<tr>
|
||||||
<td>:!marseylove:</td>
|
<td>Mirrored Emojis</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>
|
<td>:!marseylove:</td>
|
||||||
</tr>
|
<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>
|
<tr>
|
||||||
<td>$bussy$</td>
|
<td>Poll Options</td>
|
||||||
<td>
|
<td>$bussy$</td>
|
||||||
<div class="custom-control">
|
<td>
|
||||||
<input type="checkbox" class="custom-control-input" id="422741" name="option">
|
<div class="custom-control">
|
||||||
<label class="custom-control-label" for="422741">bussy - <a href="/votes?link=t3_422741"><span id="poll-422741">0</span> votes</a></label>
|
<input type="checkbox" class="custom-control-input" id="422741" name="option">
|
||||||
</div>
|
<label class="custom-control-label" for="422741">bussy - <a href="/votes?link=t3_422741"><span id="poll-422741">0</span> votes</a></label>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% filter markdown %}
|
{% filter markdown %}
|
||||||
|
|
@ -89,41 +90,44 @@ These Markdown tags format an entire paragraph of text at a time.
|
||||||
<th>Displays as</th>
|
<th>Displays as</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>Blockquote</td>
|
<tr>
|
||||||
<td>> text</td>
|
<td>Blockquote</td>
|
||||||
<td><blockquote>text</blockquote></td>
|
<td>> text</td>
|
||||||
</tr>
|
<td><blockquote>text</blockquote></td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>Headers 1-6</td>
|
<tr>
|
||||||
<td># Header 1<br>## Header 2<br>### Header 3<br>#### Header 4<br>##### Header 5<br>###### Header 6</td>
|
<td>Headers 1-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>
|
<td># Header 1<br>## Header 2<br>### Header 3<br>#### Header 4<br>##### Header 5<br>###### Header 6</td>
|
||||||
</tr>
|
<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>
|
<tr>
|
||||||
<td>1. First thing<br>2. Second thing</td>
|
<td>Ordered list</td>
|
||||||
<td><ol><li>First thing</li><li>Second thing</li></ol></td>
|
<td>1. First thing<br>2. Second thing</td>
|
||||||
</tr>
|
<td><ol><li>First thing</li><li>Second thing</li></ol></td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>Unordered list</td>
|
<tr>
|
||||||
<td>* First thing<br>* Second thing</td>
|
<td>Unordered list</td>
|
||||||
<td><ul><li>First thing</li><li>Second thing</li></ul></td>
|
<td>* First thing<br>* Second thing</td>
|
||||||
</tr>
|
<td><ul><li>First thing</li><li>Second thing</li></ul></td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>Code Block</td>
|
<tr>
|
||||||
<td>```<br>Use three backticks above and below.<br>Or, indent the lines with four spaces.<br>```</td>
|
<td>Code Block</td>
|
||||||
<td>
|
<td>```<br>Use three backticks above and below.<br>Or, indent the lines with four spaces.<br>```</td>
|
||||||
</tr>
|
<td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>Spoilers</td>
|
<tr>
|
||||||
<td><s> bussy > gussy </s></td>
|
<td>Spoilers</td>
|
||||||
<td><p class="spoiler">bussy > gussy</p></td>
|
<td><s> bussy > gussy </s></td>
|
||||||
<pre>
|
<td><p class="spoiler">bussy > gussy</p></td>
|
||||||
Use three backticks above and below.
|
<td>
|
||||||
Or, indent the lines with four spaces.
|
<pre>
|
||||||
</pre>
|
Use three backticks above and below.
|
||||||
</td>
|
Or, indent the lines with four spaces.
|
||||||
</tr>
|
</pre>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -141,21 +145,23 @@ We also have some custom hooks for mentioning users and subreddits. Note that th
|
||||||
<th>Displays as</th>
|
<th>Displays as</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>Username Mention</td>
|
<tr>
|
||||||
<td>@QuadNarca</td>
|
<td>Username Mention</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>
|
<td>@QuadNarca</td>
|
||||||
</tr>
|
<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>
|
<tr>
|
||||||
<td>r/{{'SITE_NAME' | app_config}}</td>
|
<td>Subreddit Mention</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>
|
<td>r/{{'SITE_NAME' | app_config}}</td>
|
||||||
</tr>
|
<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>
|
<tr>
|
||||||
<td>u/Bardfinn</td>
|
<td>Redditor Mention</td>
|
||||||
<td><a class="d-inline-block" rel="nofollow noopener noreferrer" href="https://www.reddit.com/u/Bardfinn/">u/Bardfinn</a></td>
|
<td>u/Bardfinn</td>
|
||||||
</tr>
|
<td><a class="d-inline-block" rel="nofollow noopener noreferrer" href="https://www.reddit.com/u/Bardfinn/">u/Bardfinn</a></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% filter markdown %}
|
{% filter markdown %}
|
||||||
|
|
@ -166,44 +172,272 @@ And we allow custom HTML in most places.
|
||||||
|
|
||||||
Allowed tags:
|
Allowed tags:
|
||||||
|
|
||||||
- b
|
<table class="table table-striped mb-5">
|
||||||
- blockquote
|
<thead class="bg-primary text-white">
|
||||||
- br
|
<tr>
|
||||||
- code
|
<th>Name</th>
|
||||||
- del
|
<th>Type</th>
|
||||||
- em
|
<th>Displays as</th>
|
||||||
- h1
|
</tr>
|
||||||
- h2
|
</thead>
|
||||||
- h3
|
<tbody>
|
||||||
- h4
|
<tr>
|
||||||
- h5
|
<td>Bold</td>
|
||||||
- h6
|
<td>This will be <b>bold</b></td>
|
||||||
- hr
|
<td>
|
||||||
- i
|
This will be <b>bold</b>
|
||||||
- li
|
</td>
|
||||||
- ol
|
</tr>
|
||||||
- p
|
<tr>
|
||||||
- pre
|
<td>Blockquote</td>
|
||||||
- strong
|
<td>
|
||||||
- sub
|
<blockquote>This is a blockquote</blockquote>
|
||||||
- sup
|
</td>
|
||||||
- table
|
<td>
|
||||||
- tbody
|
<blockquote>
|
||||||
- th
|
This is a blockquote
|
||||||
- thead
|
</blockquote>
|
||||||
- td
|
</td>
|
||||||
- tr
|
</tr>
|
||||||
- ul
|
<tr>
|
||||||
- marquee
|
<td>Line Break</td>
|
||||||
- a
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Line 1<br>Line 2
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Code</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code>This is code</code>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Strikethrough</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
The last word will have a <del>strikethrough</del>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Emphasis</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
We <em>cannot</em> live like this.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Headings</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<h1>This is heading 1</h1>
|
||||||
|
<h2>This is heading 2</h2>
|
||||||
|
<h3>This is heading 3</h3>
|
||||||
|
<h4>This is heading 4</h4>
|
||||||
|
<h5>This is heading 5</h5>
|
||||||
|
<h6>This is heading 6</h6>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Horizontal Rule</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Text 1
|
||||||
|
<hr>
|
||||||
|
Text 2
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Italics</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<i>This</i> is how you get italics.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lists</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<ul>
|
||||||
|
<li>Bullet 1</li>
|
||||||
|
<li>Bullet 2</li>
|
||||||
|
</ul>
|
||||||
|
<ol>
|
||||||
|
<li>Number 1</li>
|
||||||
|
<li>Number 2</li>
|
||||||
|
</ol>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Paragraphs</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p>Paragraph 1</p>
|
||||||
|
<p>Paragraph 2</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Preformatted Text</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<pre>
|
||||||
|
Text in a pre element
|
||||||
|
is displayed in a fixed-width
|
||||||
|
font, and it preserves
|
||||||
|
both spaces and
|
||||||
|
line breaks
|
||||||
|
</pre>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Strong</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<strong>This text is important!</strong>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Subscript</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
This text contains <sub>subscript</sub> text.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Superscript</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
E = mc<sup>2</sup>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tables</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td>Col 1</td>
|
||||||
|
<td>Col 2</td>
|
||||||
|
<td>Col 3</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>4</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>6</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Marquee</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<marquee width="60%" direction="up" height="100px">
|
||||||
|
This is a sample scrolling text that has scrolls in the upper direction.
|
||||||
|
</marquee>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Links</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
This is a <a href='https://www.w3schools.com/tags/tag_a.asp'>link</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Images</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<img src="https://i.imgur.com/SwVuagI_d.webp" width="200">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Span</td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
My mother has <span style="color:blue">blue</span> eyes.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
- img
|
- img
|
||||||
- span
|
- span
|
||||||
|
|
||||||
Allowed styles:
|
Allowed styles:
|
||||||
|
|
||||||
- color
|
<table class="table table-striped mb-5">
|
||||||
- font-weight
|
<thead class="bg-primary text-white">
|
||||||
- transform
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Type</th>
|
||||||
|
<th>Displays as</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Color</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Font Weight</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Transform</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
{% endfilter %}
|
{% endfilter %}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue