Formatting page, added tables for html formatting and styles.

master
not-a-code-cel 2021-10-05 23:13:50 -07:00
parent c89b314c05
commit b7af7c7b1e
1 changed files with 363 additions and 129 deletions

View File

@ -27,6 +27,7 @@ On {{'SITE_NAME' | app_config}}, you can use Markdown formatting.
<th>Displays as</th>
</tr>
</thead>
<tbody>
<tr>
<td>Italics</td>
<td>*text*</td>
@ -72,7 +73,7 @@ On {{'SITE_NAME' | app_config}}, you can use Markdown formatting.
</div>
</td>
</tr>
</tbody>
</table>
{% filter markdown %}
@ -89,6 +90,7 @@ These Markdown tags format an entire paragraph of text at a time.
<th>Displays as</th>
</tr>
</thead>
<tbody>
<tr>
<td>Blockquote</td>
<td>&gt; text</td>
@ -118,12 +120,14 @@ These Markdown tags format an entire paragraph of text at a time.
<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>
<pre>
Use three backticks above and below.
Or, indent the lines with four spaces.
</pre>
</td>
</tr>
</tbody>
</table>
@ -141,6 +145,7 @@ We also have some custom hooks for mentioning users and subreddits. Note that th
<th>Displays as</th>
</tr>
</thead>
<tbody>
<tr>
<td>Username Mention</td>
<td>@QuadNarca</td>
@ -156,6 +161,7 @@ We also have some custom hooks for mentioning users and subreddits. Note that th
<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>
</tbody>
</table>
{% filter markdown %}
@ -166,44 +172,272 @@ 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
<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>
<tbody>
<tr>
<td>Bold</td>
<td>This will be &lt;b&gt;bold&lt;/b&gt;</td>
<td>
This will be <b>bold</b>
</td>
</tr>
<tr>
<td>Blockquote</td>
<td>
&lt;blockquote&gt;This is a blockquote&lt;/blockquote&gt;
</td>
<td>
<blockquote>
This is a blockquote
</blockquote>
</td>
</tr>
<tr>
<td>Line Break</td>
<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
- span
Allowed styles:
- color
- font-weight
- transform
<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>
<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 %}