rentry.co Open in urlscan Pro
2606:4700:20::681a:310  Public Scan

Submitted URL: http://rentry.co/
Effective URL: https://rentry.co/
Submission: On October 31 via manual from SG — Scanned from SG

Form analysis 1 forms found in the DOM

POST

<form id="entry-form" class="long-words-overflow-y-testr" action="" method="post" style="display: flex; flex: 1 0; flex-direction: column;">
  <input type="hidden" name="csrfmiddlewaretoken" value="z8ZZg1Wt2tjDOYfQ5UCvEVl0FQi32usIBZlXVsDOVCFr3K9689qJo45FmM8Fv3LJ">
  <div role="tabpanel" class="my-2 flex-tab" style="display: flex; flex: 1 0; flex-direction: column;">
    <div class="text-danger messages"></div>
    <ul class="nav nav-tabs squared" id="textTab" role="tablist">
      <li class="nav-item" style="background-color: #F3F4F6">
        <a class="nav-link active squared text-muted px-3" id="text-tab" data-toggle="tab" href="#text" role="tab" aria-controls="text" aria-expanded="true">Text</a>
      </li>
      <li class="nav-item" style="background-color: #F3F4F6">
        <a class="nav-link squared text-muted px-3" id="preview-tab" data-toggle="tab" href="#preview" role="tab" aria-controls="preview">Preview</a>
      </li>
      <li class="nav-item" style="background-color: #F3F4F6">
        <a class="nav-link squared text-muted px-3" id="how-tab" data-toggle="tab" href="#how" role="tab" aria-controls="preview">How</a>
      </li>
    </ul>
    <div class="markdownx" style="display: flex; flex: 1 0; min-height: 0;">
      <div>
        <div style="position: absolute; width: 100%; z-index: 1">
          <div class="progress">
            <div class="bg-primary" id="progressBar"></div>
          </div>
        </div>
      </div>
      <div class="tab-content long-words main-text-input" id="textTabContent" style="display: flex; flex: 1 0;">
        <div role="tabpanel" class="tab-pane fade show active main-text-tab" id="text" aria-labelledby="text-tab" style="flex: 1 0;">
          <textarea style="background-color: white; min-height: 100%; max-height: 100%; resize: none; max-width: 100%; min-width: 100%; display: none;" class="squared markdownx-editor py-4 px-2 px-sm-4 " name="text" maxlength="200000" id="id_text"
            data-markdownx-upload-urls-path="/markdownx/upload/" data-markdownx-urls-path="/markdownx/markdownify/"></textarea>
          <div class="CodeMirror cm-s-default CodeMirror-wrap CodeMirror-focused">
            <div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="width: 18px; pointer-events: none;">
              <div style="min-width: 1px; height: 0px;"></div>
            </div>
            <div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; pointer-events: none;">
              <div style="height: 100%; min-height: 1px; width: 0px;"></div>
            </div>
            <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
            <div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
            <div class="CodeMirror-scroll" tabindex="-1">
              <div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 30px; min-height: 72px; padding-right: 0px; padding-bottom: 0px;">
                <div style="position: relative; top: 0px;">
                  <div class="CodeMirror-lines" role="presentation">
                    <div role="presentation" style="position: relative; outline: none;">
                      <div class="CodeMirror-measure"><span><span>​</span>x</span></div>
                      <div class="CodeMirror-measure"></div>
                      <div style="position: relative; z-index: 1;"></div>
                      <div class="CodeMirror-cursors" style=""></div>
                      <div class="CodeMirror-code" role="presentation" autocorrect="off" autocapitalize="sentences" spellcheck="true" contenteditable="true" tabindex="0">
                        <pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="position: absolute; height: 30px; width: 1px; border-bottom: 0px solid transparent; top: 72px;"></div>
              <div class="CodeMirror-gutters" style="display: none; height: 102px;"></div>
            </div>
          </div>
        </div>
        <div class="main-preview-tab tab-pane fade" id="preview" role="tabpanel" aria-labelledby="preview-tab" style="flex: 1 0; flex-direction: column; overflow-y: auto;">
          <div class="long-words markdownx-preview preview-inner" id="preview-inner"></div>
        </div>
        <div class="tab-pane fade" id="how" role="tabpanel" aria-labelledby="how-tab" style="flex: 1 0; flex-direction: column; overflow-y: auto;">
          <div class="long-words entry-text py-2 px-sm-4 how-inner" id="how-inner">
            <table class="ntable mtable cheatsheet">
              <thead>
                <tr class="text-center">
                  <th class="bg-transparent">What you type</th>
                  <th class="bg-transparent">What will be published</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td> # Header 1<br> ## Header 2<br><br>
                    <span class="text-muted">And so on up to 6.</span>
                  </td>
                  <td>
                    <p id="header-1" class="p-0 m-0 text-center h3">Header 1</p>
                    <p id="header-2" class="p-2 pt-3 m-0 h4">Header 2</p>
                    <p id="another-2" class="d-none">Another 2</p>
                    <p id="another-1" class="d-none">Another 1</p>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="text-muted">Return once starts a new line.<br>Return twice (blank line) starts a new paragraph.</span><br>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td> *Italics*<br> **Bold**<br> ~~Strikeout~~<br> ==Mark==<br> %red% Colored Text %%<br> %#ACBDEF% Colored Text Hex %%<br> !&gt;Spoiler<br><br>
                    <span class="text-muted"><a href="/rentry-text-colors" target="_blank">Color list (opens new page, save your work first!)</a></span>
                  </td>
                  <td>
                    <i>Italics</i><br>
                    <b>Bold</b><br>
                    <del>Strikeout</del><br>
                    <mark>Mark</mark><br>
                    <span style="color:red">Colored Text</span><br>
                    <span style="color:#8b35c8">Colored Text Hex</span><br>
                    <span class="spoiler">Spoiler</span>
                  </td>
                </tr>
                <tr>
                  <td> !~ Simple Underlined Text ~!<br> !~red; Underlined Text With Color ~!<br> !~green;double; Underlined Text Plus Style ~!<br> !~blue;default;line-through; Underlined Plus Type ~!<br> !~orange;default;default;7; Underlined Text
                    Plus Thickness ~!<br><br> %violet% !~green; Combine With Text Color ~! %%<br> !~violet; %green% Works The Other Way Too %% ~! <br><br>
                    <span class="text-muted">Underline tags can be given 4 options, separated by a semi-colon ;</span>
                    <ul class="text-muted">
                      <li>color : default | color name | #hexcode</li>
                      <li>style : default | solid (default) | double | dotted | dashed | wavy</li>
                      <li>type : default | underline (default) | line-through | overline | both</li>
                      <li>thickness : number from 1-10. Measured in pixels.</li>
                    </ul>
                  </td>
                  <td>
                    <span style="text-decoration:underline">Simple Underlined Text</span><br>
                    <span style="text-decoration-line:underline;text-decoration-color:red">Underlined Text With Color</span><br>
                    <span style="text-decoration-line:underline;text-decoration-color:green;text-decoration-style:double;">Underlined Text Plus Style</span><br>
                    <span style="text-decoration-line:underline;text-decoration-color:blue;text-decoration-line:line-through;">Underlined Plus Type</span><br>
                    <span style="text-decoration-line:underline;text-decoration-color:orange;text-decoration-thickness:7px;">Underlined Text Plus Thickness</span><br><br>
                    <span style="text-decoration-line:underline;text-decoration-color:green;color:violet">Combine With Text Color</span><br>
                    <span style="text-decoration-line:underline;text-decoration-color:violet;color:green">Works The Other Way Too</span><br><br>
                  </td>
                </tr>
                <tr>
                  <td> -&gt; Centered text &lt;-<br> -&gt; Right-aligned -&gt;<br><br>
                    <span class="text-muted">Also works for images and ### -&gt; Headers &lt;-</span>
                    <br>
                  </td>
                  <td>
                    <span class="md-center">Centered text</span>
                    <span class="md-right">Right-aligned</span>
                  </td>
                </tr>
                <tr>
                  <td> [TOC]<br><br>
                    <span class="text-muted">Generates Table of Contents from #&nbsp;Headers.<br> [TOC2] - From h2 to h6.<br> [TOC3] - From h3 to h6, and so on up to 6. </span>
                  </td>
                  <td>
                    <div class="toc">
                      <ol>
                        <li><a href="#header-1">Header 1</a>
                          <ol>
                            <li><a href="#header-2">Header 2</a></li>
                            <li><a href="#another-2">Another 2</a></li>
                          </ol>
                        </li>
                        <li><a href="#another-1">Another 1</a></li>
                      </ol>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td> - Bulleted list item a<br> - Bulleted list item b<br> &nbsp;&nbsp;&nbsp;&nbsp;- Nested item b1<br><br>
                    <span class="text-muted">Nested lists use 4 spaces or 1 tab.</span><br><br>
                    <span class="text-muted">An asterisk (*) can be used instead of a dash.</span>
                  </td>
                  <td>
                    <ul>
                      <li class="mt-0">Bulleted list item a</li>
                      <li>Bulleted list item b<ul>
                          <li>Nested item b1</li>
                        </ul>
                      </li>
                    </ul>
                  </td>
                </tr>
                <tr>
                  <td> 1. Numbered list item<br> 2. Numbered list item<br> &nbsp;&nbsp;&nbsp;&nbsp;1. Nested list item<br> &nbsp;&nbsp;&nbsp;&nbsp;2. Nested list item </td>
                  <td>
                    <ol>
                      <li class="mt-0">Numbered list item</li>
                      <li>Numbered list item<ol>
                          <li>Nested list item</li>
                          <li>Nested list item</li>
                        </ol>
                      </li>
                    </ol>
                  </td>
                </tr>
                <tr>
                  <td> - [ ] Checkbox 1<br> - [x] Checkbox 2<br>
                  </td>
                  <td>
                    <ul class="task-list">
                      <li class="mt-0"><input type="checkbox" disabled=""> Checkbox 1</li>
                      <li><input type="checkbox" disabled="" checked=""> Checkbox 2</li>
                    </ul>
                  </td>
                </tr>
                <tr>
                  <td> [//]: (comment here)<br>
                  </td>
                  <td>
                    <p>Adding [//]: () to a line will comment it out, so that it does not appear when viewing the page.</p>
                  </td>
                </tr>
                <tr>
                  <td> &gt;&gt; How to use quotes in Markdown?<br> &gt; Just prepend text with &gt; </td>
                  <td>
                    <blockquote>
                      <blockquote>
                        <p>How to use quotes in Markdown?</p>
                      </blockquote>
                      <p>Just prepend text with &gt;</p>
                    </blockquote>
                  </td>
                </tr>
                <tr>
                  <td> ``` python<br> s = "Triple backticks ( ``` ) generate code block"<br> print(s)<br> ```<br><br>
                    <span class="text-muted">For the list of supported languages see <a href="/langs">the langs page</a>.</span>
                  </td>
                  <td>
                    <table class="highlighttable mt-0">
                      <tbody>
                        <tr>
                          <td class="linenos border-0 p-0">
                            <div class="linenodiv">
                              <pre><a href="#L-1-1">1</a><br><a href="#L-1-2">2</a></pre>
                            </div>
                          </td>
                          <td class="code border-0 p-0">
                            <div class="highlight">
                              <pre><span id="L-1-1"><a name="L-1-1"></a><span class="n">s</span> <span class="o">=</span><span class="s2">"Triple backticks ( ``` ) generate code block"</span></span><br><span id="L-1-2"><a name="L-1-2"></a><span class="k">print</span><span class="p">(</span><span class="n">s</span><span class="p">)</span></span></pre>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
                <tr>
                  <td> Single backtick generates `inline code` </td>
                  <td> Single backtick generates <code>inline code</code>
                  </td>
                </tr>
                <tr>
                  <td> ***<br><br>
                    <span class="text-muted">Horizontal rule, &lt;hr&gt;</span>
                  </td>
                  <td>
                    <hr>
                  </td>
                </tr>
                <tr>
                  <td> \*not italics\*<br><br>
                    <span class="text-muted">To produce a literal asterisk or any symbol used in Markdown, use backslash to escape it.</span>
                  </td>
                  <td> *not italics* </td>
                </tr>
                <tr>
                  <td>
                    <pre class="p-0 text-reset" style="line-height: 1.5; font-size: 16px">Header | Header
------ | ------
Cell   | Cell
Cell   | Cell</pre>
                    <br><span class="text-muted">Columns can be aligned to the right with <code>--:</code> and centered with <code>:--:</code>.</span><br><br>
                    <pre class="p-0 text-reset" style="line-height: 1.5; font-size: 16px">Center | Right
:----: | ----:
Cell   | Cell
Cell   | Cell</pre>
                  </td>
                  <td>
                    <table class="ntable">
                      <thead>
                        <tr>
                          <th>Header</th>
                          <th>Header</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>Cell</td>
                          <td>Cell</td>
                        </tr>
                        <tr>
                          <td>Cell</td>
                          <td>Cell</td>
                        </tr>
                      </tbody>
                    </table>
                    <br><br>
                    <table class="ntable">
                      <thead>
                        <tr>
                          <th style="text-align: center">Center</th>
                          <th style="text-align: right">Right</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td style="text-align: center">Cell</td>
                          <td style="text-align: right">Cell</td>
                        </tr>
                        <tr>
                          <td style="text-align: center">Cell</td>
                          <td style="text-align: right">Cell</td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
                <tr>
                  <td>
                    <pre class="text-reset p-0" style="line-height: 1.5; font-size: 16px; font-family: inherit; white-space: pre-wrap;">!!! note Admonition title
    Admonition text</pre>
                    <br>
                    <span class="text-muted">Main types: <span class="text-primary">info</span>, <span class="text-success">note</span>, <span class="text-warning">warning</span>, <span class="text-danger">danger</span>. Defaults to warning.<br><br>
                      <span class="text-muted">Additional types: <span class="text-primary">greentext</span></span>
                    </span>
                    <pre class="text-reset p-0" style="line-height: 1.5; font-size: 16px; font-family: inherit; white-space: pre-wrap;">!!! info
    Title or text can be skipped
</pre>
                  </td>
                  <td>
                    <div class="admonition note">
                      <p class="admonition-title">Admonition title</p>
                      <p>Admonition text</p>
                    </div>
                    <div class="admonition info">
                      <p>Title or text can be skipped</p>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td> Autolinks:<br> https://rentry.co/ or rentry.co </td>
                  <td> Autolinks:<br>
                    <a href="https://rentry.co/">https://rentry.co/</a> or <a href="http://rentry.co/">rentry.co</a><br>
                  </td>
                </tr>
                <tr>
                  <td> Link description:<br> [Markdown paste service](https://rentry.co)<br><br>
                    <span class="text-muted">Be sure to include the "http(s)://" part of the link.</span>
                  </td>
                  <td> Link description:<br>
                    <a href="https://rentry.co">Markdown paste service</a><br>
                  </td>
                </tr>
                <tr>
                  <td> ![Alt Tag](https://i.imgur.com/PYV4crq.png)<br><br> ![Alt Tag](https://i.imgur.com/PYV4crq.png){100px:100px}<br><br> ![Alt Tag](https://i.imgur.com/PYV4crq.png "Title")<br><br> ![Alt
                    Tag](https://i.imgur.com/PYV4crq.png#left)<br><br>
                    <span class="text-muted">Be sure to include direct link to the image.</span><br>
                    <span class="text-muted">Alt tag shows if image fails to load.</span><br>
                    <span class="text-muted">Title tag controls mouseover text separely from Alt.</span><br>
                    <span class="text-muted">Add #left or #right to the image to float it.</span><br>
                    <span class="text-muted">Image sizes can be given with the following units:</span>
                    <ul>
                      <li>px : 0 - 4000</li>
                      <li>% : 0 - 500 (note: percentage height often does not do anything)</li>
                      <li>vw : 0 - 500 (percentage of the vertical size of the page)</li>
                      <li>hw : 0 - 500 (percentage of the horizontal size of the page)</li>
                      <li>no units: numbers used as pixels</li>
                    </ul>
                    <span class="text-muted">Note that this will only change the visual size of the image. A 4MB image at 50x50px will still slow down the page!</span><br><br> Images can be links by wrapping them:<br> [![Alt
                    Tag](https://i.imgur.com/PYV4crq.png)](https://rentry.co)<br><br> Create a Youtube image link by coping the part after v= into the static image link:<br> [![Alt
                    Tag](https://img.youtube.com/vi/<strong>xyz</strong>/hqdefault.jpg){300px:200px}](https://youtube.com/watch?v=<strong>xyz</strong>)
                  </td>
                  <td>
                    <img alt="Alt Tag" title="Alt Tag" src="/static/raccoon.webp?v=2"><br><br>
                    <img alt="Alt Tag" title="Alt Tag" src="/static/raccoon.webp?v=2" width="100px" height="100px"><br><br>
                    <img alt="Alt Tag" title="Title" src="/static/raccoon.webp?v=2" width="100px" height="100px"><br><br>
                    <a href="https://rentry.co"><img alt="Alt Tag" title="Title" src="/static/raccoon.webp?v=2" width="100px" height="100px"></a><br><br>
                    <a href="https://youtube.com"><img alt="Alt Tag" title="Title" src="https://img.youtube.com" width="100px" height="100px"></a>
                  </td>
                </tr>
                <tr></tr>
                <tr>
                  <td> Float Clear:<br>
                    <br> !; <br><br>
                    <span class="text-muted">Makes all following content sit below a previous image float. Useful to fix broken layouts after adding a float. Make sure to leave an empty line above.</span>
                  </td>
                  <td>
                    <br>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <fieldset>
    <div class="text-danger messages float-right"></div>
    <div class=" text-danger  messages float-right"></div>
  </fieldset>
  <div class="metadata-button-container">
    <button type="button" class="active metadata-plus">+ Metadata</button>
  </div>
  <fieldset class="metadata-fieldset">
    <input type="hidden" name="csrfmiddlewaretoken" value="z8ZZg1Wt2tjDOYfQ5UCvEVl0FQi32usIBZlXVsDOVCFr3K9689qJo45FmM8Fv3LJ">
    <div role="tabpanel" class="my-2 flex-tab" style="display: flex; flex: 1 0; flex-direction: column; min-height: 15em">
      <div class="text-danger messages"></div>
      <ul class="nav nav-tabs squared" id="textTab" role="tablist">
        <li class="nav-item" style="background-color: #F3F4F6">
          <a class="nav-link active squared text-muted px-3" id="metadata-tab" data-toggle="tab" href="#metadata" role="tab" aria-controls="text" aria-expanded="true">Metadata</a>
        </li>
        <li class="nav-item" style="background-color: #F3F4F6">
          <a class="nav-link squared text-muted px-3" id="example-tab" data-toggle="tab" href="#metadata-example" role="tab" aria-controls="preview">Example</a>
        </li>
        <li class="nav-item" style="background-color: #F3F4F6">
          <a class="nav-link squared text-muted px-3" id="metadata-how-tab" data-toggle="tab" href="#metadata-how" role="tab" aria-controls="preview">How
            </a>
        </li>
        <li class="metadata-button-container">
          <button type="button" data-action="hide" class="active">- Metadata</button>
        </li>
      </ul>
      <div class="markdownx-rem" style="display: flex; flex: 1 0; min-height: 0;">
        <div>
          <div style="position: absolute; width: 100%; z-index: 1">
            <div class="progress">
              <div class="bg-primary" id="progressBar"></div>
            </div>
          </div>
        </div>
        <div class="tab-content long-words" id="textTabContent" style="display: flex; flex: 1 0; min-height: 0;">
          <div role="tabpanel" class="tab-pane fade show active metadata-container" id="metadata" aria-labelledby="text-tab" style="flex: 1 0;">
            <textarea style="width: 100%; min-height: 10px;" class="squared markdownx-editor " name="metadata" maxlength="200000" id="metadata_text" data-markdownx-upload-urls-path="/markdownx/upload/"
              data-markdownx-urls-path="/markdownx/markdownify/"></textarea>
          </div>
          <div class="tab-pane fade" id="metadata-example" role="tabpanel" aria-labelledby="preview-tab" style="flex: 1 0; flex-direction: column; overflow-y: auto;">
            <div class="long-words entry-text py-2 px-sm-4 metadata-container example-inner" id="how-inner">
              <div class="example-container">
                <br> PAGE_TITLE = Welcome to my Rentry!<br> PAGE_DESCRIPTION = My Rentry page and everything about me<br> PAGE_IMAGE = https://rentry.co/static/icons/512.png<br> PAGE_ICON = https://rentry.co/static/raccoon.webp<br>
                <br> SHARE_TITLE = Welcome to my Rentry!<br> SHARE_DESCRIPTION = My Rentry page and everything about me<br> SHARE_IMAGE = https://rentry.co/static/icons/512.png<br> SHARE_TWITTER_TITLE = Welcome to my Rentry!<br>
                SHARE_TWITTER_DESCRIPTION = My Rentry page and everything about me<br> SHARE_TWITTER_IMAGE = https://rentry.co/static/icons/512.png<br>
                <br> OPTION_DISABLE_VIEWS = true<br> OPTION_DISABLE_SEARCH_ENGINE = true<br> OPTION_USE_ORIGINAL_PUB_DATE = true<br>
                <br> ACCESS_RECOMMENDED_THEME = dark<br> ACCESS_EASY_READ = /example<br>
                <br> CONTAINER_PADDING = 10px<br> CONTAINER_MAX_WIDTH = 600px<br> CONTAINER_INNER_FOREGROUND_COLOR = RGBA(123,123,123,0.2)<br> CONTAINER_INNER_BACKGROUND_COLOR = transparent<br> CONTAINER_INNER_BACKGROUND_IMAGE =
                https://rentry.co/static/icons/512.png<br> CONTAINER_INNER_BACKGROUND_IMAGE_REPEAT = no-repeat<br> CONTAINER_INNER_BACKGROUND_IMAGE_POSITION = center<br> CONTAINER_INNER_BACKGROUND_IMAGE_SIZE = contain<br>
                CONTAINER_OUTER_FOREGROUND_COLOR = pink<br> CONTAINER_OUTER_BACKGROUND_COLOR = purple<br> CONTAINER_OUTER_BACKGROUND_IMAGE = https://rentry.co/static/icons/512.png<br> CONTAINER_OUTER_BACKGROUND_IMAGE_REPEAT = no-repeat<br>
                CONTAINER_OUTER_BACKGROUND_IMAGE_POSITION = center<br> CONTAINER_OUTER_BACKGROUND_IMAGE_SIZE = cover<br> CONTAINER_BORDER_IMAGE = https://rentry.co/static/icons/512.png<br> CONTAINER_BORDER_IMAGE_SLICE = fill<br>
                CONTAINER_BORDER_IMAGE_WIDTH = 25px<br> CONTAINER_BORDER_IMAGE_OUTSET = 10px<br> CONTAINER_BORDER_IMAGE_REPEAT = stretch<br> CONTAINER_BORDER_COLOR = yellow<br> CONTAINER_BORDER_WIDTH = 20px<br> CONTAINER_BORDER_STYLE = dashed<br>
                CONTAINER_BORDER_RADIUS = 3px<br> CONTAINER_SHADOW_COLOR = orange<br> CONTAINER_SHADOW_OFFSET = 0px 3px<br> CONTAINER_SHADOW_SPREAD = 3px<br> CONTAINER_SHADOW_BLUR = 5px<br>
                <br> CONTENT_FONT = Caveat Edu_Australia_VIC_WA_NT_Hand_Dots<br> CONTENT_FONT_WEIGHT = 500<br> CONTENT_TEXT_DIRECTION = ltr<br> CONTENT_TEXT_SIZE = 16px 1rem 2.5rem 0 0 0 0 0 1rem 1.5rem 1rem 0.8rem<br> CONTENT_TEXT_ALIGN =
                justify<br> CONTENT_TEXT_SHADOW_COLOR = black<br> CONTENT_TEXT_SHADOW_OFFSET = 1px 1px<br> CONTENT_TEXT_SHADOW_BLUR = 4px<br> CONTENT_TEXT_COLOR = grey white<br> CONTENT_LINK_COLOR = blue aqua<br> CONTENT_BULLET_COLOR = green red<br>
                CONTENT_LINK_BEHAVIOR = same same<br>
                <br> <br>
                <p>Standalone: <a href="/metadata-example">/metadata-example</a></p>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="metadata-how" role="tabpanel" aria-labelledby="how-tab" style="flex: 1 0; flex-direction: column; overflow-y: auto;">
            <div class="long-words entry-text py-2 px-sm-4 metadata-how-inner" id="how-inner">
              <div class="how-container"></div>
              <h2>Rentry Metadata Docs</h2>
              <p>Metadata is Rentry's system that allows for full page customization while keeping its minimalistic style. It works by letting you add commands and values that each will modify the page in some way. See the Example tab for quick
                reference.</p>
              <p>Each Option is part of a group that defines what it modifies. These groups are:</p>
              <ul>
                <li><strong>PAGE:</strong> Metadata for the web page, such as page title.</li>
                <li><strong>SHARE:</strong> Metadata for the web page to be used as snippets by other websites, such as Twitter or Google.</li>
                <li><strong>OPTION:</strong> Options that control how the page functions.</li>
                <li><strong>ACCESS:</strong> Accesibility options or view preferences.</li>
                <li><strong>CONTAINER:</strong> Controls for the box surrounding the content on the page.</li>
                <li><strong>CONTENT:</strong> Controls for the content itself.</li>
                <li><strong>SECURITY:</strong> Coming soon!</li>
                <li><strong>CONTROL:</strong> Coming soon!</li>
              </ul>
              <p>Options always start with their respective group name, for example: SHARE_TITLE</p>
              <p>Each Option may have a fixed list or range of Values, explained on this page. If you get it wrong, the error message should provide detailed feedback.</p>
              <h3>General Use</h3>
              <p>To list a metadata option, you must add it to a new line in the metadata box with the format: OPTION = value</p>
              <p>A single Option can have multiple values, separated by spaces, that will control it in more detail or for different situations. For example, giving two values to CONTENT_TEXT_COLOR will set the color for light and then dark mode.</p>
              <p>Value Mapping: Some Options with multiple values will behave slightly differently depending on how many values you give. For example, CONTAINER_PADDING can be given one, two, three or four values. Using fewer than 4 will re-use the
                same values again for different sides of the container. To describe this we will provide a value mapping for each Option and count, to show you what the behavior will be. <br>If giving CONTAINER_PADDING 4 values, these will be applied
                in the following way: <br>Top Right Bottom Left <br>CONTAINER_PADDING = 5px 10px 20px 40px <br>This is how it will be applied: top = 5px, right = 10px, bottom = 20px, left = 40px </p>
              <p>Value Lists: Other Options with multiple values will affect more things as values are added. For example, FONT_SIZE will change more types of content as more values are added. <br>Within this helpsheet, we will list what each value
                does and in what order. Content font looks like this (commas just for clarity here, don't use them): <br>CONTENT_FONT = base, p, h1, h2, h3, h4, h5, h6, li, link, quotes, code <br>And as a real world example: <br>CONTENT_FONT = 12px
                1.5rem 5rem 4rem 3.5rem 3rem 2.8rem 2.5rem 1.5rem 1.5rem 2rem 1.3rem </p>
              <p>Units: Each Option has a set list of possible values that are then validated to ensure they are permitted. When these values are numbers they may be qualified by a unit, such as px: 4px. Each Option has a list of available units and
                a range of available values for each unit. This means that it might be possible to set as high as 1500px but only up to 100%.</p>
              <p>Decimals: Some Values can be decimals and each have a limit to the amount of numbers allowed after the decimal place.</p>
              <p>Require and Require one tell you when an Option must be paired with another Option. With Require, all listed Options must be present. With Require one, only one of them must be present.</p>
              <h3>Validations</h3>
              <p>Each Value submitted is validated according to an internal checking system that is re-used between different Options. This means that we can explain them here:</p>
              <ul>
                <li><strong>max_length:</strong> All Options have a max length. This is the total number of characters that can be submitted for this option.</li>
                <li><strong>color_name:</strong> A color listed within this page (this is the same as the available colors for inline text color) <a href="/rentry-text-colors">/rentry-text-colors</a></li>
                <li><strong>color_hex:</strong> A color defined as a hex (base16). These start with a # and have exactly 3, 6 or 8 letters or numbers afterwards, in the range 0-9 and A-F. When there are 3, the characters are repeated to make them 6
                  internally. When there are 8, the last two control transparency. <br> For example: #abc123 <br><a href="https://get-color.com/transparent/" target="_blank">Color picker that supports transparency and outputs as a hex</a></li>
                <li><strong>color_rgba:</strong> A color defined as a RGBA (red green blue alpha). These have the format RGBA(0, 0, 0, 1). Each of the first three numbers can be between 0 and 255. The fourth number can be a decimal between 0 and 1.
                  <br> For example: RGBA(255, 0, 120, 0.9) <br><a href="https://rgbacolorpicker.com/" target="_blank">Color picker that outputs RGBA</a></li>
                <li><strong>css_size:</strong> A number followed by one of the listed units, within the listed range. If no-unit, then this requires a bare number.</li>
                <li><strong>whitelisted_string:</strong> One of the words listed.</li>
                <li><strong>font_name:</strong> A name of a Google font, with all spaces replaced with underscores. <a href="https://fonts.google.com/">https://fonts.google.com/</a></li>
                <li><strong>url:</strong> A link, optionally starting with https:// or http://, followed by any number of subdomains, a domain, a page location, a dot and a TLD.</li>
                <li><strong>bool:</strong> true or false</li>
                <li><strong>rentry_url:</strong> A full rentry URL or a /shorthand-url</li>
                <li><strong>rentry_url_exists:</strong> A check to see if the entered URL ever existed</li>
                <li><strong>rentry_url_enabled:</strong> A check to ensure the entered URL is currently active and not deleted or disabled.</li>
              </ul>
              <h3>Tips</h3>
              <p>You may not list the same option more than once.</p>
              <p>The metadata validator is ultra-strict, meaning you can only put in information that is permitted.</p>
              <p>Most Options do not have default values. To use the default, just delete the Option.</p>
              <h3>Metadata Options</h3>
              <div class="metadata-options-container">
                <div class="metadata-group-container">
                  <h4>GROUP: PAGE</h4>
                  <div class="metadata-option">
                    <h5>PAGE_TITLE</h5>
                    <p>Appears on the tab for this page's window in the browser.</p>
                    <p>Default Value: Taken from page content.</p>
                    <p>Max Length: 60</p>
                    <p>Max Values Accepted: 1</p>
                  </div>
                  <div class="metadata-option">
                    <h5>PAGE_DESCRIPTION</h5>
                    <p>Used by search engines and content snippets.</p>
                    <p>Default Value: Taken from page content.</p>
                    <p>Max Length: 160</p>
                    <p>Max Values Accepted: 1</p>
                  </div>
                  <div class="metadata-option">
                    <h5>PAGE_IMAGE</h5>
                    <p>Used by search engines and content snippets. If we ever have internal page linking with previews, this is what will show.</p>
                    <p>Default Value: Taken from page content.</p>
                    <p>Max Length: 1000</p>
                    <p>Max Values Accepted: 1</p>
                    <p>Validate One: <span class="validation-item">url</span></p>
                  </div>
                  <div class="metadata-option">
                    <h5>PAGE_ICON</h5>
                    <p>Changes the icon that appears in the browser tab.</p>
                    <p>Default Value: The standard Rentry icon shown on all pages</p>
                    <p>Max Length: 1000</p>
                    <p>Max Values Accepted: 1</p>
                    <p>Validate One: <span class="validation-item">url</span></p>
                  </div>
                  <div class="metadata-group-container">
                    <h4>GROUP: SHARE</h4>
                    <div class="metadata-option">
                      <h5>SHARE_TITLE</h5>
                      <p>Used by search engines and content snippets.</p>
                      <p>Default Value: The value in PAGE_TITLE</p>
                      <p>Max Length: 60</p>
                      <p>Max Values Accepted: 1</p>
                    </div>
                    <div class="metadata-option">
                      <h5>SHARE_DESCRIPTION</h5>
                      <p>Used by search engines and content snippets. It's unlikely to be necessary to set this as well as PAGE_DESCRIPTION.</p>
                      <p>Default Value: The value in PAGE_DESCRIPTION</p>
                      <p>Max Length: 160</p>
                      <p>Max Values Accepted: 1</p>
                    </div>
                    <div class="metadata-option">
                      <h5>SHARE_IMAGE</h5>
                      <p>Used by search engines and content snippets.</p>
                      <p>Default Value: The value in PAGE_IMAGE</p>
                      <p>Max Length: 1000</p>
                      <p>Max Values Accepted: 1</p>
                      <p>Validate One: <span class="validation-item">url</span></p>
                    </div>
                    <div class="metadata-option">
                      <h5>SHARE_TWITTER_TITLE</h5>
                      <p>Used by Twitter and other Twitter compatible platforms as the title snippet of the link.</p>
                      <p>Default Value: The value in SHARE_TITLE</p>
                      <p>Max Length: 60</p>
                      <p>Max Values Accepted: 1</p>
                    </div>
                    <div class="metadata-option">
                      <h5>SHARE_TWITTER_DESCRIPTION</h5>
                      <p>Used by Twitter and other Twitter compatible platforms as the description snippet of the link.</p>
                      <p>Default Value: The value in SHARE_DESCRIPTION</p>
                      <p>Max Length: 160</p>
                      <p>Max Values Accepted: 1</p>
                    </div>
                    <div class="metadata-option">
                      <h5>SHARE_TWITTER_IMAGE</h5>
                      <p>This image will be used for Twitter and other Twitter compatible platforms when loading a preview of this page.</p>
                      <p>Default Value: The value in SHARE_IMAGE</p>
                      <p>Max Length: 1000</p>
                      <p>Max Values Accepted: 1</p>
                      <p>Validate One: <span class="validation-item">url</span></p>
                    </div>
                    <div class="metadata-group-container">
                      <h4>GROUP: OPTION</h4>
                      <div class="metadata-option">
                        <h5>OPTION_DISABLE_VIEWS</h5>
                        <p>Disables the view counter and hides it. Existing view count will return when this is unset.</p>
                        <p>Max Length: 5</p>
                        <p>Max Values Accepted: 1</p>
                        <p>Validate All: <span class="validation-item">bool</span></p>
                      </div>
                      <div class="metadata-option">
                        <h5>OPTION_DISABLE_SEARCH_ENGINE</h5>
                        <p>Removes the URL from the sitemap and instructs crawling search engines to not index it. Note that it can take up to 2 months for Google to remove listings.</p>
                        <p>Max Length: 5</p>
                        <p>Max Values Accepted: 1</p>
                        <p>Validate All: <span class="validation-item">bool</span></p>
                      </div>
                      <div class="metadata-option">
                        <h5>OPTION_USE_ORIGINAL_PUB_DATE</h5>
                        <p>If a URL was deleted and re-created this forces it to show the date it was first published, rather than date of re-activation.</p>
                        <p>Max Length: 5</p>
                        <p>Max Values Accepted: 1</p>
                        <p>Validate All: <span class="validation-item">bool</span></p>
                      </div>
                      <div class="metadata-group-container">
                        <h4>GROUP: ACCESS</h4>
                        <div class="metadata-option">
                          <h5>ACCESS_RECOMMENDED_THEME</h5>
                          <p>When a page does not look good in one of the viewing modes, this will auto switch the viewer to the listed mode.</p>
                          <p>Max Length: 5</p>
                          <p>Max Values Accepted: 1</p>
                          <p>Validate All: <span class="validation-item">whitelisted_string</span></p>
                          <p>Permitted whitelisted_string Values:</p>
                          <ul>
                            <li>dark</li>
                            <li>light</li>
                          </ul>
                        </div>
                        <div class="metadata-option">
                          <h5>ACCESS_EASY_READ</h5>
                          <p>Adds an e2r button next to the high contrast button that people can click on, which will link to the listed URL. Also, visiting /url/e2r will load the easy read version instead. While this is validated when saved, if the
                            easy read version is removed afterwards, this setting will not update and the link will go to a 404.</p>
                          <p>Max Length: 300</p>
                          <p>Max Values Accepted: 1</p>
                          <p>Validate All: <span class="validation-item">rentry_url</span><span class="validation-item">rentry_url_exists</span><span class="validation-item">rentry_url_enabled</span></p>
                        </div>
                        <div class="metadata-group-container">
                          <h4>GROUP: CONTAINER</h4>
                          <div class="metadata-option">
                            <h5>CONTAINER_PADDING</h5>
                            <p>The internal spacing between the main container and the content.</p>
                            <p>Default Value: 20px</p>
                            <p>Max Length: 64</p>
                            <p>Max Values Accepted: 4</p>
                            <p>Validate All: <span class="validation-item">css_size</span></p>
                            <p>Units and Ranges For css_size:</p>
                            <ul>
                              <li>px : 0 - 40 || Decimals: 0</li>
                              <li>% : 0 - 25 || Decimals: 3</li>
                              <li>vh : 0 - 15 || Decimals: 4</li>
                              <li>hw : 0 - 20 || Decimals: 4</li>
                              <li>rem : 0 - 7 || Decimals: 4</li>
                            </ul>
                            <p>Value Mapping:</p>
                            <ol>
                              <li>All Sides</li>
                              <li>TOP BOTTOM</li>
                              <li>TOP LEFT+RIGHT BOTTOM</li>
                              <li>TOP RIGHT BOTTOM LEFT</li>
                            </ol>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_MAX_WIDTH</h5>
                            <p>Limits and centers the content container's width, which centers all content on larger screens, instead of it aligning left.</p>
                            <p>Max Length: 16</p>
                            <p>Max Values Accepted: 1</p>
                            <p>Validate All: <span class="validation-item">css_size</span></p>
                            <p>Units and Ranges For css_size:</p>
                            <ul>
                              <li>px : 100 - 1600 || Decimals: 0</li>
                              <li>% : 10 - 100 || Decimals: 3</li>
                              <li>vh : 10 - 100 || Decimals: 4</li>
                              <li>hw : 10 - 100 || Decimals: 4</li>
                              <li>rem : 3 - 25 || Decimals: 4</li>
                            </ul>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_INNER_FOREGROUND_COLOR</h5>
                            <p>Sets the color of the inner foreground, which is best used as a semi transparent layer on top of the content. Giving a non transparent color here will block out all content. Recommended usage: set a color with around
                              0.2 transparency, which will give a slight tint to all content.</p>
                            <p>Default Value: none</p>
                            <p>Max Length: 32</p>
                            <p>Max Values Accepted: 2</p>
                            <p>Validate One: <span class="validation-item">color_name</span><span class="validation-item">color_hex</span><span class="validation-item">color_rgba</span></p>
                            <p>Value Mapping:</p>
                            <ol>
                              <li>All Modes</li>
                              <li>Light Dark</li>
                            </ol>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_INNER_BACKGROUND_COLOR</h5>
                            <p>Sets the color of the inner background. Try to ensure that the text color has a high contrast with the background, so that it is still readable. Set to transparent if you are using a border image.</p>
                            <p>Max Length: 32</p>
                            <p>Max Values Accepted: 2</p>
                            <p>Validate One: <span class="validation-item">color_name</span><span class="validation-item">color_hex</span><span class="validation-item">color_rgba</span></p>
                            <p>Value Mapping:</p>
                            <ol>
                              <li>All Modes</li>
                              <li>Light Dark</li>
                            </ol>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_INNER_BACKGROUND_IMAGE</h5>
                            <p>Sets the background image used in the inner container, behind the content.</p>
                            <p>Max Length: 1000</p>
                            <p>Max Values Accepted: 1</p>
                            <p>Validate One: <span class="validation-item">url</span></p>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_INNER_BACKGROUND_IMAGE_REPEAT</h5>
                            <p>Should the background image show one copy, or many, and how should these behave?</p>
                            <p>Max Length: 16</p>
                            <p>Max Values Accepted: 1</p>
                            <p>Validate All: <span class="validation-item">whitelisted_string</span></p>
                            <p>Permitted whitelisted_string Values:</p>
                            <ul>
                              <li>no-repeat</li>
                              <li>repeat-x</li>
                              <li>repeat-y</li>
                              <li>round</li>
                              <li>space</li>
                            </ul>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_INNER_BACKGROUND_IMAGE_POSITION</h5>
                            <p>Controls the position of the inner background image.</p>
                            <p>Max Length: 6</p>
                            <p>Max Values Accepted: 1</p>
                            <p>Validate All: <span class="validation-item">whitelisted_string</span></p>
                            <p>Permitted whitelisted_string Values:</p>
                            <ul>
                              <li>bottom</li>
                              <li>center</li>
                              <li>left</li>
                              <li>right</li>
                              <li>top</li>
                            </ul>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_INNER_BACKGROUND_IMAGE_SIZE</h5>
                            <p>Should the image stretch, or sit as large as possible without distorting? Cover = stretch.</p>
                            <p>Max Length: 16</p>
                            <p>Max Values Accepted: 1</p>
                            <p>Validate One: <span class="validation-item">whitelisted_string</span><span class="validation-item">css_size</span></p>
                            <p>Units and Ranges For css_size:</p>
                            <ul>
                              <li>px : 1 - 3000 || Decimals: 0</li>
                              <li>% : 0.1 - 150 || Decimals: 3</li>
                              <li>vh : 0.1 - 200 || Decimals: 4</li>
                              <li>hw : 0.1 - 200 || Decimals: 4</li>
                              <li>rem : 0.1 - 50 || Decimals: 4</li>
                            </ul>
                            <p>Permitted whitelisted_string Values:</p>
                            <ul>
                              <li>contain</li>
                              <li>cover</li>
                            </ul>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_OUTER_FOREGROUND_COLOR</h5>
                            <p>Set the colour for the foreground of the outer container, that will sit on top of everything else (inner container not included). If you want anything else to be visible here, you must use transparency.</p>
                            <p>Max Length: 32</p>
                            <p>Max Values Accepted: 2</p>
                            <p>Validate One: <span class="validation-item">color_name</span><span class="validation-item">color_hex</span><span class="validation-item">color_rgba</span></p>
                            <p>Value Mapping:</p>
                            <ol>
                              <li>All Modes</li>
                              <li>Light Dark</li>
                            </ol>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_OUTER_BACKGROUND_COLOR</h5>
                            <p>Set the colour for the very back of the outer container, that everything else will appear in front of. No need to use transparency here.</p>
                            <p>Max Length: 32</p>
                            <p>Max Values Accepted: 2</p>
                            <p>Validate One: <span class="validation-item">color_name</span><span class="validation-item">color_hex</span><span class="validation-item">color_rgba</span></p>
                            <p>Value Mapping:</p>
                            <ol>
                              <li>All Modes</li>
                              <li>Light Dark</li>
                            </ol>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_OUTER_BACKGROUND_IMAGE</h5>
                            <p>A link to an image to be used for the outer container's background. This will set in front of the outer background color and underneath the inner background color.</p>
                            <p>Max Length: 1000</p>
                            <p>Max Values Accepted: 1</p>
                            <p>Validate One: <span class="validation-item">url</span></p>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_OUTER_BACKGROUND_IMAGE_REPEAT</h5>
                            <p>Controls whether the outer background image should repeat or not.</p>
                            <p>Max Length: 16</p>
                            <p>Max Values Accepted: 1</p>
                            <p>Validate All: <span class="validation-item">whitelisted_string</span></p>
                            <p>Permitted whitelisted_string Values:</p>
                            <ul>
                              <li>no-repeat</li>
                              <li>repeat-x</li>
                              <li>repeat-y</li>
                              <li>round</li>
                              <li>space</li>
                            </ul>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_OUTER_BACKGROUND_IMAGE_POSITION</h5>
                            <p>Controls the position of the outer background image.</p>
                            <p>Max Length: 16</p>
                            <p>Max Values Accepted: 1</p>
                            <p>Validate All: <span class="validation-item">whitelisted_string</span></p>
                            <p>Permitted whitelisted_string Values:</p>
                            <ul>
                              <li>bottom</li>
                              <li>center</li>
                              <li>left</li>
                              <li>right</li>
                              <li>top</li>
                            </ul>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_OUTER_BACKGROUND_IMAGE_SIZE</h5>
                            <p>Controls whether the outer background image should stretch and how.</p>
                            <p>Max Length: 16</p>
                            <p>Max Values Accepted: 1</p>
                            <p>Validate One: <span class="validation-item">whitelisted_string</span><span class="validation-item">css_size</span></p>
                            <p>Units and Ranges For css_size:</p>
                            <ul>
                              <li>px : 1 - 3000 || Decimals: 0</li>
                              <li>% : 0.1 - 150 || Decimals: 3</li>
                              <li>vh : 0.1 - 200 || Decimals: 4</li>
                              <li>hw : 0.1 - 200 || Decimals: 4</li>
                              <li>rem : 0.1 - 50 || Decimals: 4</li>
                            </ul>
                            <p>Permitted whitelisted_string Values:</p>
                            <ul>
                              <li>contain</li>
                              <li>cover</li>
                            </ul>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_BORDER_IMAGE</h5>
                            <p>The location of the image, stored elsewhere.</p>
                            <p>Max Length: 1000</p>
                            <p>Max Values Accepted: 1</p>
                            <p>Validate One: <span class="validation-item">url</span></p>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_BORDER_IMAGE_SLICE</h5>
                            <p>Controls how the border image should be cut up and displayed.</p>
                            <p>Max Length: 64</p>
                            <p>Max Values Accepted: 4</p>
                            <p>Validate One: <span class="validation-item">whitelisted_string</span><span class="validation-item">css_size</span></p>
                            <p>Requires: <span class="require-item">CONTAINER_BORDER_IMAGE</span><span class="require-item">CONTAINER_BORDER_IMAGE_WIDTH</span></p>
                            <p>Units and Ranges For css_size:</p>
                            <ul>
                              <li>no-unit : 0 - 20 || Decimals: 0</li>
                              <li>% : 0 - 100 || Decimals: 3</li>
                            </ul>
                            <p>Permitted whitelisted_string Values:</p>
                            <ul>
                              <li>fill</li>
                            </ul>
                            <p>Reference: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice">https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice</a></p>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_BORDER_IMAGE_WIDTH</h5>
                            <p>The width of the image used in the border.</p>
                            <p>Max Length: 64</p>
                            <p>Max Values Accepted: 4</p>
                            <p>Validate One: <span class="validation-item">whitelisted_string</span><span class="validation-item">css_size</span></p>
                            <p>Requires: <span class="require-item">CONTAINER_BORDER_IMAGE</span></p>
                            <p>Units and Ranges For css_size:</p>
                            <ul>
                              <li>no-unit : 0 - 20 || Decimals: 0</li>
                              <li>px : 0 - 30 || Decimals: 0</li>
                              <li>% : 0 - 100 || Decimals: 3</li>
                            </ul>
                            <p>Value Mapping:</p>
                            <ol>
                              <li>All sides</li>
                              <li>TOP BOTTOM</li>
                              <li>TOP LEFT+RIGHT BOTTOM</li>
                              <li>TOP RIGHT BOTTOM LEFT</li>
                            </ol>
                            <p>Permitted whitelisted_string Values:</p>
                            <ul>
                              <li>auto</li>
                            </ul>
                            <p>Reference: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width">https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width</a></p>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_BORDER_IMAGE_OUTSET</h5>
                            <p>Controls where the border image appears in relation to the edges of the container. Higher values = further away.</p>
                            <p>Max Length: 64</p>
                            <p>Max Values Accepted: 4</p>
                            <p>Validate One: <span class="validation-item">whitelisted_string</span><span class="validation-item">css_size</span></p>
                            <p>Requires: <span class="require-item">CONTAINER_BORDER_IMAGE</span><span class="require-item">CONTAINER_BORDER_IMAGE_WIDTH</span></p>
                            <p>Units and Ranges For css_size:</p>
                            <ul>
                              <li>no-unit : 0 - 20 || Decimals: 0</li>
                              <li>px : 0 - 30 || Decimals: 0</li>
                            </ul>
                            <p>Value Mapping:</p>
                            <ol>
                              <li>All sides</li>
                              <li>TOP BOTTOM</li>
                              <li>TOP LEFT+RIGHT BOTTOM</li>
                              <li>TOP RIGHT BOTTOM LEFT</li>
                            </ol>
                            <p>Permitted whitelisted_string Values:</p>
                            <ul>
                              <li>auto</li>
                            </ul>
                            <p>Reference: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset">https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset</a></p>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_BORDER_IMAGE_REPEAT</h5>
                            <p>Whether the image repeats or not throughout the border, and how</p>
                            <p>Max Length: 32</p>
                            <p>Max Values Accepted: 2</p>
                            <p>Validate One: <span class="validation-item">whitelisted_string</span></p>
                            <p>Requires: <span class="require-item">CONTAINER_BORDER_IMAGE</span><span class="require-item">CONTAINER_BORDER_IMAGE_WIDTH</span></p>
                            <p>Value Mapping:</p>
                            <ol>
                              <li>All sides</li>
                              <li>TOP+MIDDLE+BOTTOM LEFT+RIGHT</li>
                            </ol>
                            <p>Permitted whitelisted_string Values:</p>
                            <ul>
                              <li>stretch</li>
                              <li>repeat</li>
                              <li>round</li>
                              <li>space</li>
                            </ul>
                            <p>Reference: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat">https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat</a></p>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_BORDER_COLOR</h5>
                            <p>The color of the border.</p>
                            <p>Max Length: 120</p>
                            <p>Max Values Accepted: 4</p>
                            <p>Validate One: <span class="validation-item">color_name</span><span class="validation-item">color_hex</span><span class="validation-item">color_rgba</span></p>
                            <p>Requires: <span class="require-item">CONTAINER_BORDER_WIDTH</span><span class="require-item">CONTAINER_BORDER_STYLE</span></p>
                            <p>Value Mapping:</p>
                            <ol>
                              <li>All sides</li>
                              <li>TOP BOTTOM</li>
                              <li>TOP LEFT+RIGHT BOTTOM</li>
                              <li>TOP RIGHT BOTTOM LEFT</li>
                            </ol>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_BORDER_WIDTH</h5>
                            <p>The thickness of the border.</p>
                            <p>Max Length: 64</p>
                            <p>Max Values Accepted: 4</p>
                            <p>Validate All: <span class="validation-item">css_size</span></p>
                            <p>Requires: <span class="require-item">CONTAINER_BORDER_STYLE</span></p>
                            <p>Units and Ranges For css_size:</p>
                            <ul>
                              <li>px : 0 - 40 || Decimals: 0</li>
                              <li>% : 0 - 15 || Decimals: 3</li>
                              <li>vh : 0 - 5 || Decimals: 4</li>
                              <li>hw : 0 - 5 || Decimals: 4</li>
                              <li>rem : 0 - 4 || Decimals: 4</li>
                            </ul>
                            <p>Value Mapping:</p>
                            <ol>
                              <li>All sides</li>
                              <li>TOP BOTTOM</li>
                              <li>TOP LEFT+RIGHT BOTTOM</li>
                              <li>TOP RIGHT BOTTOM LEFT</li>
                            </ol>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_BORDER_STYLE</h5>
                            <p>The appearance style of the border.</p>
                            <p>Max Length: 64</p>
                            <p>Max Values Accepted: 4</p>
                            <p>Validate All: <span class="validation-item">whitelisted_string</span></p>
                            <p>Requires: <span class="require-item">CONTAINER_BORDER_WIDTH</span></p>
                            <p>Permitted whitelisted_string Values:</p>
                            <ul>
                              <li>dotted</li>
                              <li>dashed</li>
                              <li>solid</li>
                              <li>double</li>
                              <li>groove</li>
                              <li>ridge</li>
                              <li>inset</li>
                              <li>outset</li>
                            </ul>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_BORDER_RADIUS</h5>
                            <p>Curves the sides of the container. This can be used without setting any borders at all.</p>
                            <p>Max Length: 64</p>
                            <p>Max Values Accepted: 4</p>
                            <p>Validate All: <span class="validation-item">css_size</span></p>
                            <p>Units and Ranges For css_size:</p>
                            <ul>
                              <li>px : 0 - 200 || Decimals: 0</li>
                              <li>% : 0 - 50 || Decimals: 3</li>
                              <li>vh : 0 - 40 || Decimals: 4</li>
                              <li>hw : 0 - 40 || Decimals: 4</li>
                              <li>rem : 0 - 30 || Decimals: 4</li>
                            </ul>
                            <p>Value Mapping:</p>
                            <ol>
                              <li>All sides</li>
                              <li>TOP BOTTOM</li>
                              <li>TOP LEFT+RIGHT BOTTOM</li>
                              <li>TOP RIGHT BOTTOM LEFT</li>
                            </ol>
                            <p>Reference: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius</a></p>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_SHADOW_COLOR</h5>
                            <p>The color of the shadow.</p>
                            <p>Max Length: 32</p>
                            <p>Max Values Accepted: 1</p>
                            <p>Validate One: <span class="validation-item">color_name</span><span class="validation-item">color_hex</span><span class="validation-item">color_rgba</span></p>
                            <p>Requires One: <span class="require-item">CONTAINER_SHADOW_OFFSET</span><span class="require-item">CONTAINER_SHADOW_SPREAD</span><span class="require-item">CONTAINER_SHADOW_BLUR</span></p>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_SHADOW_OFFSET</h5>
                            <p>The amount the shadow offsets from the container, first along, then up/down</p>
                            <p>Max Length: 32</p>
                            <p>Max Values Accepted: 2</p>
                            <p>Validate All: <span class="validation-item">css_size</span></p>
                            <p>Requires: <span class="require-item">CONTAINER_SHADOW_COLOR</span></p>
                            <p>Units and Ranges For css_size:</p>
                            <ul>
                              <li>px : -15 - 15 || Decimals: 0</li>
                              <li>% : -5 - 5 || Decimals: 3</li>
                              <li>vh : -2 - 2 || Decimals: 4</li>
                              <li>hw : -2 - 2 || Decimals: 4</li>
                              <li>rem : -4 - 2 || Decimals: 4</li>
                            </ul>
                            <p>Value Mapping:</p>
                            <ol>
                              <li>Offset-X+Offset-Y</li>
                              <li>Offset-X Offset-Y</li>
                            </ol>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_SHADOW_SPREAD</h5>
                            <p>The spread (thickness) of the shadow. Think of this like a border size that becomes a shadow with blur.</p>
                            <p>Max Length: 12</p>
                            <p>Max Values Accepted: 1</p>
                            <p>Validate All: <span class="validation-item">css_size</span></p>
                            <p>Requires: <span class="require-item">CONTAINER_SHADOW_COLOR</span></p>
                            <p>Units and Ranges For css_size:</p>
                            <ul>
                              <li>px : 0 - 30 || Decimals: 0</li>
                              <li>% : 0 - 10 || Decimals: 3</li>
                              <li>vh : 0 - 5 || Decimals: 4</li>
                              <li>hw : 0 - 5 || Decimals: 4</li>
                              <li>rem : 0 - 3 || Decimals: 4</li>
                            </ul>
                          </div>
                          <div class="metadata-option">
                            <h5>CONTAINER_SHADOW_BLUR</h5>
                            <p>The blurryness of the shadow. Recommended to make this a few px at least, or the shadow will look like a border.</p>
                            <p>Max Length: 12</p>
                            <p>Max Values Accepted: 1</p>
                            <p>Validate All: <span class="validation-item">css_size</span></p>
                            <p>Requires: <span class="require-item">CONTAINER_SHADOW_COLOR</span></p>
                            <p>Units and Ranges For css_size:</p>
                            <ul>
                              <li>px : 0 - 30 || Decimals: 0</li>
                              <li>% : 0 - 10 || Decimals: 3</li>
                              <li>vh : 0 - 5 || Decimals: 4</li>
                              <li>hw : 0 - 5 || Decimals: 4</li>
                              <li>rem : 0 - 3 || Decimals: 4</li>
                            </ul>
                          </div>
                          <div class="metadata-group-container">
                            <h4>GROUP: CONTENT</h4>
                            <div class="metadata-option">
                              <h5>CONTENT_FONT</h5>
                              <p>Sets the font for the page content. Any font listed on Google fonts is permitted. Copy the font name from the title on the Google fonts page and if there are any spaces, switch them for underscores. For example: Comic
                                Neue becomes Comic_Neue. </p>
                              <p>Max Length: 1000</p>
                              <p>Max Values Accepted: 2</p>
                              <p>Validate All: <span class="validation-item">font_name</span></p>
                              <p>Value Mapping:</p>
                              <ol>
                                <li>Font for all content</li>
                                <li>Paragraph Headings</li>
                              </ol>
                              <p>Reference: <a href="https://fonts.google.com/">https://fonts.google.com/</a></p>
                            </div>
                            <div class="metadata-option">
                              <h5>CONTENT_FONT_WEIGHT</h5>
                              <p>Sets the font weight (boldness) for the page content. If you use multiple fonts, this will apply to them in the same order. If a weight is not available from Google then your browser will try to adjust the weight
                                itself, which may look odd!</p>
                              <p>Max Length: 24</p>
                              <p>Max Values Accepted: 2</p>
                              <p>Validate All: <span class="validation-item">whitelisted_string</span></p>
                              <p>Value Mapping:</p>
                              <ol>
                                <li>Font for all content</li>
                                <li>Paragraph Headings</li>
                              </ol>
                              <p>Permitted whitelisted_string Values:</p>
                              <ul>
                                <li>bold</li>
                                <li>bolder</li>
                                <li>lighter</li>
                                <li>normal</li>
                                <li>100</li>
                                <li>200</li>
                                <li>300</li>
                                <li>400</li>
                                <li>500</li>
                                <li>600</li>
                                <li>700</li>
                                <li>800</li>
                                <li>900</li>
                              </ul>
                            </div>
                            <div class="metadata-option">
                              <h5>CONTENT_TEXT_DIRECTION</h5>
                              <p>Setting to rtl switches the text mode to right to left, which is recommended if using a right to left language such as Arabic. If you use this with a left to right language like English it will cause odd behaviour,
                                such as punctuation appearing at the beginning of a line.</p>
                              <p>Max Length: 7</p>
                              <p>Max Values Accepted: 1</p>
                              <p>Validate All: <span class="validation-item">whitelisted_string</span></p>
                              <p>Permitted whitelisted_string Values:</p>
                              <ul>
                                <li>ltr</li>
                                <li>rtl</li>
                              </ul>
                            </div>
                            <div class="metadata-option">
                              <h5>CONTENT_TEXT_SIZE</h5>
                              <p>Sets the font size, either for the whole page, or for separate types of content depending on how many Values you supply. &lt;br /&gt;The first Value, base, sets the root font size of the page, which you can then make
                                use of by setting other Values as relative. &lt;br /&gt;It is recommended to set the base as 16px and to use rem for all other values. This will mean that you can then adjust all font sizes by changing only the base
                                value. &lt;br /&gt;For example, you set the base as 16px, Heading1 as 2.5rem and Paragraph as 1rem. This then outputs Heading1 as 2.5x16=40px and Paragraph as 16x1 = 16px. &lt;br /&gt;Later, you decide you want to font
                                to be larger. So you change the base to 20px. Now, Heading1 will be 2.5x20=50px and Paragraph will be 20x1=20px &lt;br /&gt;If you have all Values set, this will make it much easier to control! </p>
                              <p>Default Value: 16px 1rem 2.5rem 2rem 1.75rem 1.5rem 1.25rem 1rem 1rem 1rem 1rem 14px</p>
                              <p>Max Length: 128</p>
                              <p>Max Values Accepted: 12</p>
                              <p>Validate All: <span class="validation-item">css_size</span></p>
                              <p>Units and Ranges For css_size:</p>
                              <ul>
                                <li>no-unit : 0 - 0 || Decimals: 0</li>
                                <li>px : 8 - 64 || Decimals: 0</li>
                                <li>% : 10 - 500 || Decimals: 3</li>
                                <li>vh : 2 - 10 || Decimals: 4</li>
                                <li>hw : 2 - 10 || Decimals: 4</li>
                                <li>rem : 0.3 - 8 || Decimals: 4</li>
                              </ul>
                              <p>Value List:</p>
                              <ol>
                                <li>Base</li>
                                <li>Paragraphs</li>
                                <li># Header 1</li>
                                <li>## Header 2</li>
                                <li>### Header 3</li>
                                <li>#### Header 4</li>
                                <li>##### Header 5</li>
                                <li>###### Header 6</li>
                                <li>List item</li>
                                <li>Link</li>
                                <li>Quotes</li>
                                <li>Code</li>
                              </ol>
                            </div>
                            <div class="metadata-option">
                              <h5>CONTENT_TEXT_ALIGN</h5>
                              <p>Sets how text sits on the page, especially when there are multiple lines. Justify makes every line in a block of text take up the same width.</p>
                              <p>Default Value: left</p>
                              <p>Max Length: 7</p>
                              <p>Max Values Accepted: 1</p>
                              <p>Validate All: <span class="validation-item">whitelisted_string</span></p>
                              <p>Permitted whitelisted_string Values:</p>
                              <ul>
                                <li>right</li>
                                <li>center</li>
                                <li>justify</li>
                              </ul>
                            </div>
                            <div class="metadata-option">
                              <h5>CONTENT_TEXT_SHADOW_COLOR</h5>
                              <p>Sets the color of text shadow.</p>
                              <p>Max Length: 32</p>
                              <p>Max Values Accepted: 1</p>
                              <p>Validate One: <span class="validation-item">color_name</span><span class="validation-item">color_hex</span><span class="validation-item">color_rgba</span></p>
                              <p>Requires: <span class="require-item">CONTENT_TEXT_SHADOW_OFFSET</span></p>
                            </div>
                            <div class="metadata-option">
                              <h5>CONTENT_TEXT_SHADOW_OFFSET</h5>
                              <p>Sets the offset of text shadow.</p>
                              <p>Max Length: 32</p>
                              <p>Max Values Accepted: 2</p>
                              <p>Validate All: <span class="validation-item">css_size</span></p>
                              <p>Requires: <span class="require-item">CONTENT_TEXT_SHADOW_COLOR</span></p>
                              <p>Units and Ranges For css_size:</p>
                              <ul>
                                <li>px : -15 - 15 || Decimals: 0</li>
                                <li>% : -5 - 5 || Decimals: 3</li>
                                <li>vh : -2 - 2 || Decimals: 4</li>
                                <li>hw : -2 - 2 || Decimals: 4</li>
                                <li>rem : -2 - 2 || Decimals: 4</li>
                              </ul>
                              <p>Value Mapping:</p>
                              <ol>
                                <li>Offset-X+Offset-Y</li>
                                <li>Offset-X Offset-Y</li>
                              </ol>
                            </div>
                            <div class="metadata-option">
                              <h5>CONTENT_TEXT_SHADOW_BLUR</h5>
                              <p>Sets the blur of text shadow.</p>
                              <p>Max Length: 12</p>
                              <p>Max Values Accepted: 1</p>
                              <p>Validate All: <span class="validation-item">css_size</span></p>
                              <p>Requires: <span class="require-item">CONTENT_TEXT_SHADOW_COLOR</span><span class="require-item">CONTENT_TEXT_SHADOW_OFFSET</span></p>
                              <p>Units and Ranges For css_size:</p>
                              <ul>
                                <li>px : 0 - 30 || Decimals: 0</li>
                                <li>% : 0 - 10 || Decimals: 3</li>
                                <li>vh : 0 - 5 || Decimals: 4</li>
                                <li>hw : 0 - 5 || Decimals: 4</li>
                                <li>rem : 0 - 3 || Decimals: 4</li>
                              </ul>
                            </div>
                            <div class="metadata-option">
                              <h5>CONTENT_TEXT_COLOR</h5>
                              <p>Sets the base text color. Inline text colors will override this.</p>
                              <p>Max Length: 128</p>
                              <p>Max Values Accepted: 2</p>
                              <p>Validate One: <span class="validation-item">color_name</span><span class="validation-item">color_hex</span><span class="validation-item">color_rgba</span></p>
                              <p>Value Mapping:</p>
                              <ol>
                                <li>All Modes</li>
                                <li>Light Dark</li>
                              </ol>
                            </div>
                            <div class="metadata-option">
                              <h5>CONTENT_LINK_COLOR</h5>
                              <p>Sets the base link color.</p>
                              <p>Max Length: 16</p>
                              <p>Max Values Accepted: 2</p>
                              <p>Validate One: <span class="validation-item">color_name</span><span class="validation-item">color_hex</span><span class="validation-item">color_rgba</span></p>
                              <p>Value Mapping:</p>
                              <ol>
                                <li>All Modes</li>
                                <li>Light Dark</li>
                              </ol>
                            </div>
                            <div class="metadata-option">
                              <h5>CONTENT_BULLET_COLOR</h5>
                              <p>Sets the bullet color for lists.</p>
                              <p>Max Length: 64</p>
                              <p>Max Values Accepted: 2</p>
                              <p>Validate One: <span class="validation-item">color_name</span><span class="validation-item">color_hex</span><span class="validation-item">color_rgba</span></p>
                              <p>Value Mapping:</p>
                              <ol>
                                <li>All Modes</li>
                                <li>Light Dark</li>
                              </ol>
                            </div>
                            <div class="metadata-option">
                              <h5>CONTENT_LINK_BEHAVIOR</h5>
                              <p>Sets whether links load in new pages, or on the same page. Internal links are Rentry URLs, external links are anything else.</p>
                              <p>Default Value: same new</p>
                              <p>Max Length: 32</p>
                              <p>Max Values Accepted: 2</p>
                              <p>Validate All: <span class="validation-item">whitelisted_string</span></p>
                              <p>Value Mapping:</p>
                              <ol>
                                <li>All Links</li>
                                <li>Internal External</li>
                              </ol>
                              <p>Permitted whitelisted_string Values:</p>
                              <ul>
                                <li>same</li>
                                <li>new</li>
                              </ul>
                            </div>
                          </div>
                          <h3>Glossary</h3>
                          <p>Don't know what a term means? We'll list everything you need to know here.</p>
                          <ul>
                            <li><strong>Option:</strong> A metadata command, always in full capitals and with underscores for spaces, followed by the = sign. For example: PAGE_TITLE =</li>
                            <li><strong>Value:</strong> The information you would like to apply to an Option. This is put after the first = sign and must not break to a new line.</li>
                            <li><strong>Unit:</strong> The descriptor for a number. For example 2px means 2 pixels.</li>
                            <li><strong>Unit: Px (Pixels): </strong>The little square dots a screen is made of. A phone normally has about 350 across and 700 down. A desktop is normally 1200-1600 by 1000.</li>
                            <li><strong>Unit: %: </strong>The percent of the container, or of the thing it is subordinate to (such as when used as a font size unit). </li>
                            <li><strong>Unit: no-unit: </strong>When an option allows for a bare number, it will be listed as this (as when no-unit is not available, a bare number will be read as the default unit for that option). The default unit is
                              always no-unit when this is available.</li>
                            <li><strong>Unit: hw (Horizontal Width): </strong> The percentage of the full width of the page for the device that is viewing. On desktop, changing the window size will affect this.</li>
                            <li><strong>Unit: vh (Vertical Height): </strong> The percentage of the full height of the page for the device that is viewing. On desktop, changing the window size will affect this.</li>
                            <li><strong>Unit: rem (Root EM): </strong> A relative value based on the root font size. Affected by the font itself as the value is taken from width of the font's capital M.</li>
                          </ul>
                          <p>Standalone: <a href="/metadata-how">/metadata-how</a></p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <div class="code-url row float-right no-gutters">
      <div class="col-6 no-gutters">
        <div class="mr-1">
          <input autocapitalize="none" type="text" class="w-100 form-control squared float-left mb-2 " name="edit_code" id="id_edit_code" placeholder="Custom edit code" aria-label="Custom edit code" maxlength="100" value="">
        </div>
      </div>
      <div class="col-6 no-gutters">
        <div class="ml-1">
          <input autocapitalize="none" type="text" class="w-100 form-control squared float-right ml-2 mb-2 " name="url" id="id_url" placeholder="Custom url" aria-label="Custom url" maxlength="100" value="">
        </div>
      </div>
    </div>
    <button type="submit" id="submitButton" class="btn btn-light squared mr-2 mb-2 float-left" style="min-width: 2.8rem">Go</button>
  </fieldset>
  <div class="text-center w-100 mb-3">
    <hr class="my-2 basement-hr">
    <a class="mr-1" href="/">new</a>·<a class="mx-1" href="/what">what</a>·<a class="mx-1" href="/how">how</a>·<a class="mx-1" href="/langs">langs</a>·<a class="ml-1" href="/what#contacts">contacts</a>
    <div class="position-relative"><span style="right: 0; bottom: -9px; background:transparent!important" class="position-absolute btn squared mr-2 mr-sm-0" id="darkModeBtn" title="Dark/light mode"></span></div>
    <h1 style="font-size: 11px" class="mb-0 mt-2 p-0 text-muted no-pointer font-weight-normal">Rentry.co - Markdown Paste Service</h1>
  </div>
</form>

Text Content

 * Text
 * Preview
 * How

x




​





What you type What will be published # Header 1
## Header 2

And so on up to 6.

Header 1

Header 2

Another 2

Another 1

Return once starts a new line.
Return twice (blank line) starts a new paragraph.
*Italics*
**Bold**
~~Strikeout~~
==Mark==
%red% Colored Text %%
%#ACBDEF% Colored Text Hex %%
!>Spoiler

Color list (opens new page, save your work first!) Italics
Bold
Strikeout
Mark
Colored Text
Colored Text Hex
Spoiler !~ Simple Underlined Text ~!
!~red; Underlined Text With Color ~!
!~green;double; Underlined Text Plus Style ~!
!~blue;default;line-through; Underlined Plus Type ~!
!~orange;default;default;7; Underlined Text Plus Thickness ~!

%violet% !~green; Combine With Text Color ~! %%
!~violet; %green% Works The Other Way Too %% ~!

Underline tags can be given 4 options, separated by a semi-colon ;
 * color : default | color name | #hexcode
 * style : default | solid (default) | double | dotted | dashed | wavy
 * type : default | underline (default) | line-through | overline | both
 * thickness : number from 1-10. Measured in pixels.

Simple Underlined Text
Underlined Text With Color
Underlined Text Plus Style
Underlined Plus Type
Underlined Text Plus Thickness

Combine With Text Color
Works The Other Way Too

-> Centered text <-
-> Right-aligned ->

Also works for images and ### -> Headers <-
Centered text Right-aligned [TOC]

Generates Table of Contents from # Headers.
[TOC2] - From h2 to h6.
[TOC3] - From h3 to h6, and so on up to 6.
 1. Header 1
    1. Header 2
    2. Another 2
 2. Another 1

- Bulleted list item a
- Bulleted list item b
    - Nested item b1

Nested lists use 4 spaces or 1 tab.

An asterisk (*) can be used instead of a dash.
 * Bulleted list item a
 * Bulleted list item b
   * Nested item b1

1. Numbered list item
2. Numbered list item
    1. Nested list item
    2. Nested list item
 1. Numbered list item
 2. Numbered list item
    1. Nested list item
    2. Nested list item

- [ ] Checkbox 1
- [x] Checkbox 2

 * Checkbox 1
 * Checkbox 2

[//]: (comment here)


Adding [//]: () to a line will comment it out, so that it does not appear when
viewing the page.

>> How to use quotes in Markdown?
> Just prepend text with >

> > How to use quotes in Markdown?
> 
> Just prepend text with >

``` python
s = "Triple backticks ( ``` ) generate code block"
print(s)
```

For the list of supported languages see the langs page.

1
2

s ="Triple backticks ( ``` ) generate code block"
print(s)

Single backtick generates `inline code` Single backtick generates inline code
***

Horizontal rule, <hr>

--------------------------------------------------------------------------------

\*not italics\*

To produce a literal asterisk or any symbol used in Markdown, use backslash to
escape it. *not italics*

Header | Header
------ | ------
Cell   | Cell
Cell   | Cell


Columns can be aligned to the right with --: and centered with :--:.



Center | Right
:----: | ----:
Cell   | Cell
Cell   | Cell

Header Header Cell Cell Cell Cell



Center Right Cell Cell Cell Cell

!!! note Admonition title
    Admonition text


Main types: info, note, warning, danger. Defaults to warning.

Additional types: greentext

!!! info
    Title or text can be skipped


Admonition title

Admonition text

Title or text can be skipped

Autolinks:
https://rentry.co/ or rentry.co Autolinks:
https://rentry.co/ or rentry.co
Link description:
[Markdown paste service](https://rentry.co)

Be sure to include the "http(s)://" part of the link. Link description:
Markdown paste service
![Alt Tag](https://i.imgur.com/PYV4crq.png)

![Alt Tag](https://i.imgur.com/PYV4crq.png){100px:100px}

![Alt Tag](https://i.imgur.com/PYV4crq.png "Title")

![Alt Tag](https://i.imgur.com/PYV4crq.png#left)

Be sure to include direct link to the image.
Alt tag shows if image fails to load.
Title tag controls mouseover text separely from Alt.
Add #left or #right to the image to float it.
Image sizes can be given with the following units:
 * px : 0 - 4000
 * % : 0 - 500 (note: percentage height often does not do anything)
 * vw : 0 - 500 (percentage of the vertical size of the page)
 * hw : 0 - 500 (percentage of the horizontal size of the page)
 * no units: numbers used as pixels

Note that this will only change the visual size of the image. A 4MB image at
50x50px will still slow down the page!

Images can be links by wrapping them:
[![Alt Tag](https://i.imgur.com/PYV4crq.png)](https://rentry.co)

Create a Youtube image link by coping the part after v= into the static image
link:
[![Alt
Tag](https://img.youtube.com/vi/xyz/hqdefault.jpg){300px:200px}](https://youtube.com/watch?v=xyz)







Float Clear:

!;

Makes all following content sit below a previous image float. Useful to fix
broken layouts after adding a float. Make sure to leave an empty line above.




+ Metadata
 * Metadata
 * Example
 * How
 * - Metadata


PAGE_TITLE = Welcome to my Rentry!
PAGE_DESCRIPTION = My Rentry page and everything about me
PAGE_IMAGE = https://rentry.co/static/icons/512.png
PAGE_ICON = https://rentry.co/static/raccoon.webp

SHARE_TITLE = Welcome to my Rentry!
SHARE_DESCRIPTION = My Rentry page and everything about me
SHARE_IMAGE = https://rentry.co/static/icons/512.png
SHARE_TWITTER_TITLE = Welcome to my Rentry!
SHARE_TWITTER_DESCRIPTION = My Rentry page and everything about me
SHARE_TWITTER_IMAGE = https://rentry.co/static/icons/512.png

OPTION_DISABLE_VIEWS = true
OPTION_DISABLE_SEARCH_ENGINE = true
OPTION_USE_ORIGINAL_PUB_DATE = true

ACCESS_RECOMMENDED_THEME = dark
ACCESS_EASY_READ = /example

CONTAINER_PADDING = 10px
CONTAINER_MAX_WIDTH = 600px
CONTAINER_INNER_FOREGROUND_COLOR = RGBA(123,123,123,0.2)
CONTAINER_INNER_BACKGROUND_COLOR = transparent
CONTAINER_INNER_BACKGROUND_IMAGE = https://rentry.co/static/icons/512.png
CONTAINER_INNER_BACKGROUND_IMAGE_REPEAT = no-repeat
CONTAINER_INNER_BACKGROUND_IMAGE_POSITION = center
CONTAINER_INNER_BACKGROUND_IMAGE_SIZE = contain
CONTAINER_OUTER_FOREGROUND_COLOR = pink
CONTAINER_OUTER_BACKGROUND_COLOR = purple
CONTAINER_OUTER_BACKGROUND_IMAGE = https://rentry.co/static/icons/512.png
CONTAINER_OUTER_BACKGROUND_IMAGE_REPEAT = no-repeat
CONTAINER_OUTER_BACKGROUND_IMAGE_POSITION = center
CONTAINER_OUTER_BACKGROUND_IMAGE_SIZE = cover
CONTAINER_BORDER_IMAGE = https://rentry.co/static/icons/512.png
CONTAINER_BORDER_IMAGE_SLICE = fill
CONTAINER_BORDER_IMAGE_WIDTH = 25px
CONTAINER_BORDER_IMAGE_OUTSET = 10px
CONTAINER_BORDER_IMAGE_REPEAT = stretch
CONTAINER_BORDER_COLOR = yellow
CONTAINER_BORDER_WIDTH = 20px
CONTAINER_BORDER_STYLE = dashed
CONTAINER_BORDER_RADIUS = 3px
CONTAINER_SHADOW_COLOR = orange
CONTAINER_SHADOW_OFFSET = 0px 3px
CONTAINER_SHADOW_SPREAD = 3px
CONTAINER_SHADOW_BLUR = 5px

CONTENT_FONT = Caveat Edu_Australia_VIC_WA_NT_Hand_Dots
CONTENT_FONT_WEIGHT = 500
CONTENT_TEXT_DIRECTION = ltr
CONTENT_TEXT_SIZE = 16px 1rem 2.5rem 0 0 0 0 0 1rem 1.5rem 1rem 0.8rem
CONTENT_TEXT_ALIGN = justify
CONTENT_TEXT_SHADOW_COLOR = black
CONTENT_TEXT_SHADOW_OFFSET = 1px 1px
CONTENT_TEXT_SHADOW_BLUR = 4px
CONTENT_TEXT_COLOR = grey white
CONTENT_LINK_COLOR = blue aqua
CONTENT_BULLET_COLOR = green red
CONTENT_LINK_BEHAVIOR = same same




Standalone: /metadata-example


RENTRY METADATA DOCS

Metadata is Rentry's system that allows for full page customization while
keeping its minimalistic style. It works by letting you add commands and values
that each will modify the page in some way. See the Example tab for quick
reference.

Each Option is part of a group that defines what it modifies. These groups are:

 * PAGE: Metadata for the web page, such as page title.
 * SHARE: Metadata for the web page to be used as snippets by other websites,
   such as Twitter or Google.
 * OPTION: Options that control how the page functions.
 * ACCESS: Accesibility options or view preferences.
 * CONTAINER: Controls for the box surrounding the content on the page.
 * CONTENT: Controls for the content itself.
 * SECURITY: Coming soon!
 * CONTROL: Coming soon!

Options always start with their respective group name, for example: SHARE_TITLE

Each Option may have a fixed list or range of Values, explained on this page. If
you get it wrong, the error message should provide detailed feedback.


GENERAL USE

To list a metadata option, you must add it to a new line in the metadata box
with the format: OPTION = value

A single Option can have multiple values, separated by spaces, that will control
it in more detail or for different situations. For example, giving two values to
CONTENT_TEXT_COLOR will set the color for light and then dark mode.

Value Mapping: Some Options with multiple values will behave slightly
differently depending on how many values you give. For example,
CONTAINER_PADDING can be given one, two, three or four values. Using fewer than
4 will re-use the same values again for different sides of the container. To
describe this we will provide a value mapping for each Option and count, to show
you what the behavior will be.
If giving CONTAINER_PADDING 4 values, these will be applied in the following
way:
Top Right Bottom Left
CONTAINER_PADDING = 5px 10px 20px 40px
This is how it will be applied: top = 5px, right = 10px, bottom = 20px, left =
40px

Value Lists: Other Options with multiple values will affect more things as
values are added. For example, FONT_SIZE will change more types of content as
more values are added.
Within this helpsheet, we will list what each value does and in what order.
Content font looks like this (commas just for clarity here, don't use them):
CONTENT_FONT = base, p, h1, h2, h3, h4, h5, h6, li, link, quotes, code
And as a real world example:
CONTENT_FONT = 12px 1.5rem 5rem 4rem 3.5rem 3rem 2.8rem 2.5rem 1.5rem 1.5rem
2rem 1.3rem

Units: Each Option has a set list of possible values that are then validated to
ensure they are permitted. When these values are numbers they may be qualified
by a unit, such as px: 4px. Each Option has a list of available units and a
range of available values for each unit. This means that it might be possible to
set as high as 1500px but only up to 100%.

Decimals: Some Values can be decimals and each have a limit to the amount of
numbers allowed after the decimal place.

Require and Require one tell you when an Option must be paired with another
Option. With Require, all listed Options must be present. With Require one, only
one of them must be present.


VALIDATIONS

Each Value submitted is validated according to an internal checking system that
is re-used between different Options. This means that we can explain them here:

 * max_length: All Options have a max length. This is the total number of
   characters that can be submitted for this option.
 * color_name: A color listed within this page (this is the same as the
   available colors for inline text color) /rentry-text-colors
 * color_hex: A color defined as a hex (base16). These start with a # and have
   exactly 3, 6 or 8 letters or numbers afterwards, in the range 0-9 and A-F.
   When there are 3, the characters are repeated to make them 6 internally. When
   there are 8, the last two control transparency.
   For example: #abc123
   Color picker that supports transparency and outputs as a hex
 * color_rgba: A color defined as a RGBA (red green blue alpha). These have the
   format RGBA(0, 0, 0, 1). Each of the first three numbers can be between 0 and
   255. The fourth number can be a decimal between 0 and 1.
   For example: RGBA(255, 0, 120, 0.9)
   Color picker that outputs RGBA
 * css_size: A number followed by one of the listed units, within the listed
   range. If no-unit, then this requires a bare number.
 * whitelisted_string: One of the words listed.
 * font_name: A name of a Google font, with all spaces replaced with
   underscores. https://fonts.google.com/
 * url: A link, optionally starting with https:// or http://, followed by any
   number of subdomains, a domain, a page location, a dot and a TLD.
 * bool: true or false
 * rentry_url: A full rentry URL or a /shorthand-url
 * rentry_url_exists: A check to see if the entered URL ever existed
 * rentry_url_enabled: A check to ensure the entered URL is currently active and
   not deleted or disabled.


TIPS

You may not list the same option more than once.

The metadata validator is ultra-strict, meaning you can only put in information
that is permitted.

Most Options do not have default values. To use the default, just delete the
Option.


METADATA OPTIONS

GROUP: PAGE

PAGE_TITLE

Appears on the tab for this page's window in the browser.

Default Value: Taken from page content.

Max Length: 60

Max Values Accepted: 1

PAGE_DESCRIPTION

Used by search engines and content snippets.

Default Value: Taken from page content.

Max Length: 160

Max Values Accepted: 1

PAGE_IMAGE

Used by search engines and content snippets. If we ever have internal page
linking with previews, this is what will show.

Default Value: Taken from page content.

Max Length: 1000

Max Values Accepted: 1

Validate One: url

PAGE_ICON

Changes the icon that appears in the browser tab.

Default Value: The standard Rentry icon shown on all pages

Max Length: 1000

Max Values Accepted: 1

Validate One: url

GROUP: SHARE

SHARE_TITLE

Used by search engines and content snippets.

Default Value: The value in PAGE_TITLE

Max Length: 60

Max Values Accepted: 1

SHARE_DESCRIPTION

Used by search engines and content snippets. It's unlikely to be necessary to
set this as well as PAGE_DESCRIPTION.

Default Value: The value in PAGE_DESCRIPTION

Max Length: 160

Max Values Accepted: 1

SHARE_IMAGE

Used by search engines and content snippets.

Default Value: The value in PAGE_IMAGE

Max Length: 1000

Max Values Accepted: 1

Validate One: url

SHARE_TWITTER_TITLE

Used by Twitter and other Twitter compatible platforms as the title snippet of
the link.

Default Value: The value in SHARE_TITLE

Max Length: 60

Max Values Accepted: 1

SHARE_TWITTER_DESCRIPTION

Used by Twitter and other Twitter compatible platforms as the description
snippet of the link.

Default Value: The value in SHARE_DESCRIPTION

Max Length: 160

Max Values Accepted: 1

SHARE_TWITTER_IMAGE

This image will be used for Twitter and other Twitter compatible platforms when
loading a preview of this page.

Default Value: The value in SHARE_IMAGE

Max Length: 1000

Max Values Accepted: 1

Validate One: url

GROUP: OPTION

OPTION_DISABLE_VIEWS

Disables the view counter and hides it. Existing view count will return when
this is unset.

Max Length: 5

Max Values Accepted: 1

Validate All: bool

OPTION_DISABLE_SEARCH_ENGINE

Removes the URL from the sitemap and instructs crawling search engines to not
index it. Note that it can take up to 2 months for Google to remove listings.

Max Length: 5

Max Values Accepted: 1

Validate All: bool

OPTION_USE_ORIGINAL_PUB_DATE

If a URL was deleted and re-created this forces it to show the date it was first
published, rather than date of re-activation.

Max Length: 5

Max Values Accepted: 1

Validate All: bool

GROUP: ACCESS

ACCESS_RECOMMENDED_THEME

When a page does not look good in one of the viewing modes, this will auto
switch the viewer to the listed mode.

Max Length: 5

Max Values Accepted: 1

Validate All: whitelisted_string

Permitted whitelisted_string Values:

 * dark
 * light

ACCESS_EASY_READ

Adds an e2r button next to the high contrast button that people can click on,
which will link to the listed URL. Also, visiting /url/e2r will load the easy
read version instead. While this is validated when saved, if the easy read
version is removed afterwards, this setting will not update and the link will go
to a 404.

Max Length: 300

Max Values Accepted: 1

Validate All: rentry_urlrentry_url_existsrentry_url_enabled

GROUP: CONTAINER

CONTAINER_PADDING

The internal spacing between the main container and the content.

Default Value: 20px

Max Length: 64

Max Values Accepted: 4

Validate All: css_size

Units and Ranges For css_size:

 * px : 0 - 40 || Decimals: 0
 * % : 0 - 25 || Decimals: 3
 * vh : 0 - 15 || Decimals: 4
 * hw : 0 - 20 || Decimals: 4
 * rem : 0 - 7 || Decimals: 4

Value Mapping:

 1. All Sides
 2. TOP BOTTOM
 3. TOP LEFT+RIGHT BOTTOM
 4. TOP RIGHT BOTTOM LEFT

CONTAINER_MAX_WIDTH

Limits and centers the content container's width, which centers all content on
larger screens, instead of it aligning left.

Max Length: 16

Max Values Accepted: 1

Validate All: css_size

Units and Ranges For css_size:

 * px : 100 - 1600 || Decimals: 0
 * % : 10 - 100 || Decimals: 3
 * vh : 10 - 100 || Decimals: 4
 * hw : 10 - 100 || Decimals: 4
 * rem : 3 - 25 || Decimals: 4

CONTAINER_INNER_FOREGROUND_COLOR

Sets the color of the inner foreground, which is best used as a semi transparent
layer on top of the content. Giving a non transparent color here will block out
all content. Recommended usage: set a color with around 0.2 transparency, which
will give a slight tint to all content.

Default Value: none

Max Length: 32

Max Values Accepted: 2

Validate One: color_namecolor_hexcolor_rgba

Value Mapping:

 1. All Modes
 2. Light Dark

CONTAINER_INNER_BACKGROUND_COLOR

Sets the color of the inner background. Try to ensure that the text color has a
high contrast with the background, so that it is still readable. Set to
transparent if you are using a border image.

Max Length: 32

Max Values Accepted: 2

Validate One: color_namecolor_hexcolor_rgba

Value Mapping:

 1. All Modes
 2. Light Dark

CONTAINER_INNER_BACKGROUND_IMAGE

Sets the background image used in the inner container, behind the content.

Max Length: 1000

Max Values Accepted: 1

Validate One: url

CONTAINER_INNER_BACKGROUND_IMAGE_REPEAT

Should the background image show one copy, or many, and how should these behave?

Max Length: 16

Max Values Accepted: 1

Validate All: whitelisted_string

Permitted whitelisted_string Values:

 * no-repeat
 * repeat-x
 * repeat-y
 * round
 * space

CONTAINER_INNER_BACKGROUND_IMAGE_POSITION

Controls the position of the inner background image.

Max Length: 6

Max Values Accepted: 1

Validate All: whitelisted_string

Permitted whitelisted_string Values:

 * bottom
 * center
 * left
 * right
 * top

CONTAINER_INNER_BACKGROUND_IMAGE_SIZE

Should the image stretch, or sit as large as possible without distorting? Cover
= stretch.

Max Length: 16

Max Values Accepted: 1

Validate One: whitelisted_stringcss_size

Units and Ranges For css_size:

 * px : 1 - 3000 || Decimals: 0
 * % : 0.1 - 150 || Decimals: 3
 * vh : 0.1 - 200 || Decimals: 4
 * hw : 0.1 - 200 || Decimals: 4
 * rem : 0.1 - 50 || Decimals: 4

Permitted whitelisted_string Values:

 * contain
 * cover

CONTAINER_OUTER_FOREGROUND_COLOR

Set the colour for the foreground of the outer container, that will sit on top
of everything else (inner container not included). If you want anything else to
be visible here, you must use transparency.

Max Length: 32

Max Values Accepted: 2

Validate One: color_namecolor_hexcolor_rgba

Value Mapping:

 1. All Modes
 2. Light Dark

CONTAINER_OUTER_BACKGROUND_COLOR

Set the colour for the very back of the outer container, that everything else
will appear in front of. No need to use transparency here.

Max Length: 32

Max Values Accepted: 2

Validate One: color_namecolor_hexcolor_rgba

Value Mapping:

 1. All Modes
 2. Light Dark

CONTAINER_OUTER_BACKGROUND_IMAGE

A link to an image to be used for the outer container's background. This will
set in front of the outer background color and underneath the inner background
color.

Max Length: 1000

Max Values Accepted: 1

Validate One: url

CONTAINER_OUTER_BACKGROUND_IMAGE_REPEAT

Controls whether the outer background image should repeat or not.

Max Length: 16

Max Values Accepted: 1

Validate All: whitelisted_string

Permitted whitelisted_string Values:

 * no-repeat
 * repeat-x
 * repeat-y
 * round
 * space

CONTAINER_OUTER_BACKGROUND_IMAGE_POSITION

Controls the position of the outer background image.

Max Length: 16

Max Values Accepted: 1

Validate All: whitelisted_string

Permitted whitelisted_string Values:

 * bottom
 * center
 * left
 * right
 * top

CONTAINER_OUTER_BACKGROUND_IMAGE_SIZE

Controls whether the outer background image should stretch and how.

Max Length: 16

Max Values Accepted: 1

Validate One: whitelisted_stringcss_size

Units and Ranges For css_size:

 * px : 1 - 3000 || Decimals: 0
 * % : 0.1 - 150 || Decimals: 3
 * vh : 0.1 - 200 || Decimals: 4
 * hw : 0.1 - 200 || Decimals: 4
 * rem : 0.1 - 50 || Decimals: 4

Permitted whitelisted_string Values:

 * contain
 * cover

CONTAINER_BORDER_IMAGE

The location of the image, stored elsewhere.

Max Length: 1000

Max Values Accepted: 1

Validate One: url

CONTAINER_BORDER_IMAGE_SLICE

Controls how the border image should be cut up and displayed.

Max Length: 64

Max Values Accepted: 4

Validate One: whitelisted_stringcss_size

Requires: CONTAINER_BORDER_IMAGECONTAINER_BORDER_IMAGE_WIDTH

Units and Ranges For css_size:

 * no-unit : 0 - 20 || Decimals: 0
 * % : 0 - 100 || Decimals: 3

Permitted whitelisted_string Values:

 * fill

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice

CONTAINER_BORDER_IMAGE_WIDTH

The width of the image used in the border.

Max Length: 64

Max Values Accepted: 4

Validate One: whitelisted_stringcss_size

Requires: CONTAINER_BORDER_IMAGE

Units and Ranges For css_size:

 * no-unit : 0 - 20 || Decimals: 0
 * px : 0 - 30 || Decimals: 0
 * % : 0 - 100 || Decimals: 3

Value Mapping:

 1. All sides
 2. TOP BOTTOM
 3. TOP LEFT+RIGHT BOTTOM
 4. TOP RIGHT BOTTOM LEFT

Permitted whitelisted_string Values:

 * auto

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width

CONTAINER_BORDER_IMAGE_OUTSET

Controls where the border image appears in relation to the edges of the
container. Higher values = further away.

Max Length: 64

Max Values Accepted: 4

Validate One: whitelisted_stringcss_size

Requires: CONTAINER_BORDER_IMAGECONTAINER_BORDER_IMAGE_WIDTH

Units and Ranges For css_size:

 * no-unit : 0 - 20 || Decimals: 0
 * px : 0 - 30 || Decimals: 0

Value Mapping:

 1. All sides
 2. TOP BOTTOM
 3. TOP LEFT+RIGHT BOTTOM
 4. TOP RIGHT BOTTOM LEFT

Permitted whitelisted_string Values:

 * auto

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset

CONTAINER_BORDER_IMAGE_REPEAT

Whether the image repeats or not throughout the border, and how

Max Length: 32

Max Values Accepted: 2

Validate One: whitelisted_string

Requires: CONTAINER_BORDER_IMAGECONTAINER_BORDER_IMAGE_WIDTH

Value Mapping:

 1. All sides
 2. TOP+MIDDLE+BOTTOM LEFT+RIGHT

Permitted whitelisted_string Values:

 * stretch
 * repeat
 * round
 * space

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat

CONTAINER_BORDER_COLOR

The color of the border.

Max Length: 120

Max Values Accepted: 4

Validate One: color_namecolor_hexcolor_rgba

Requires: CONTAINER_BORDER_WIDTHCONTAINER_BORDER_STYLE

Value Mapping:

 1. All sides
 2. TOP BOTTOM
 3. TOP LEFT+RIGHT BOTTOM
 4. TOP RIGHT BOTTOM LEFT

CONTAINER_BORDER_WIDTH

The thickness of the border.

Max Length: 64

Max Values Accepted: 4

Validate All: css_size

Requires: CONTAINER_BORDER_STYLE

Units and Ranges For css_size:

 * px : 0 - 40 || Decimals: 0
 * % : 0 - 15 || Decimals: 3
 * vh : 0 - 5 || Decimals: 4
 * hw : 0 - 5 || Decimals: 4
 * rem : 0 - 4 || Decimals: 4

Value Mapping:

 1. All sides
 2. TOP BOTTOM
 3. TOP LEFT+RIGHT BOTTOM
 4. TOP RIGHT BOTTOM LEFT

CONTAINER_BORDER_STYLE

The appearance style of the border.

Max Length: 64

Max Values Accepted: 4

Validate All: whitelisted_string

Requires: CONTAINER_BORDER_WIDTH

Permitted whitelisted_string Values:

 * dotted
 * dashed
 * solid
 * double
 * groove
 * ridge
 * inset
 * outset

CONTAINER_BORDER_RADIUS

Curves the sides of the container. This can be used without setting any borders
at all.

Max Length: 64

Max Values Accepted: 4

Validate All: css_size

Units and Ranges For css_size:

 * px : 0 - 200 || Decimals: 0
 * % : 0 - 50 || Decimals: 3
 * vh : 0 - 40 || Decimals: 4
 * hw : 0 - 40 || Decimals: 4
 * rem : 0 - 30 || Decimals: 4

Value Mapping:

 1. All sides
 2. TOP BOTTOM
 3. TOP LEFT+RIGHT BOTTOM
 4. TOP RIGHT BOTTOM LEFT

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

CONTAINER_SHADOW_COLOR

The color of the shadow.

Max Length: 32

Max Values Accepted: 1

Validate One: color_namecolor_hexcolor_rgba

Requires One:
CONTAINER_SHADOW_OFFSETCONTAINER_SHADOW_SPREADCONTAINER_SHADOW_BLUR

CONTAINER_SHADOW_OFFSET

The amount the shadow offsets from the container, first along, then up/down

Max Length: 32

Max Values Accepted: 2

Validate All: css_size

Requires: CONTAINER_SHADOW_COLOR

Units and Ranges For css_size:

 * px : -15 - 15 || Decimals: 0
 * % : -5 - 5 || Decimals: 3
 * vh : -2 - 2 || Decimals: 4
 * hw : -2 - 2 || Decimals: 4
 * rem : -4 - 2 || Decimals: 4

Value Mapping:

 1. Offset-X+Offset-Y
 2. Offset-X Offset-Y

CONTAINER_SHADOW_SPREAD

The spread (thickness) of the shadow. Think of this like a border size that
becomes a shadow with blur.

Max Length: 12

Max Values Accepted: 1

Validate All: css_size

Requires: CONTAINER_SHADOW_COLOR

Units and Ranges For css_size:

 * px : 0 - 30 || Decimals: 0
 * % : 0 - 10 || Decimals: 3
 * vh : 0 - 5 || Decimals: 4
 * hw : 0 - 5 || Decimals: 4
 * rem : 0 - 3 || Decimals: 4

CONTAINER_SHADOW_BLUR

The blurryness of the shadow. Recommended to make this a few px at least, or the
shadow will look like a border.

Max Length: 12

Max Values Accepted: 1

Validate All: css_size

Requires: CONTAINER_SHADOW_COLOR

Units and Ranges For css_size:

 * px : 0 - 30 || Decimals: 0
 * % : 0 - 10 || Decimals: 3
 * vh : 0 - 5 || Decimals: 4
 * hw : 0 - 5 || Decimals: 4
 * rem : 0 - 3 || Decimals: 4

GROUP: CONTENT

CONTENT_FONT

Sets the font for the page content. Any font listed on Google fonts is
permitted. Copy the font name from the title on the Google fonts page and if
there are any spaces, switch them for underscores. For example: Comic Neue
becomes Comic_Neue.

Max Length: 1000

Max Values Accepted: 2

Validate All: font_name

Value Mapping:

 1. Font for all content
 2. Paragraph Headings

Reference: https://fonts.google.com/

CONTENT_FONT_WEIGHT

Sets the font weight (boldness) for the page content. If you use multiple fonts,
this will apply to them in the same order. If a weight is not available from
Google then your browser will try to adjust the weight itself, which may look
odd!

Max Length: 24

Max Values Accepted: 2

Validate All: whitelisted_string

Value Mapping:

 1. Font for all content
 2. Paragraph Headings

Permitted whitelisted_string Values:

 * bold
 * bolder
 * lighter
 * normal
 * 100
 * 200
 * 300
 * 400
 * 500
 * 600
 * 700
 * 800
 * 900

CONTENT_TEXT_DIRECTION

Setting to rtl switches the text mode to right to left, which is recommended if
using a right to left language such as Arabic. If you use this with a left to
right language like English it will cause odd behaviour, such as punctuation
appearing at the beginning of a line.

Max Length: 7

Max Values Accepted: 1

Validate All: whitelisted_string

Permitted whitelisted_string Values:

 * ltr
 * rtl

CONTENT_TEXT_SIZE

Sets the font size, either for the whole page, or for separate types of content
depending on how many Values you supply. <br />The first Value, base, sets the
root font size of the page, which you can then make use of by setting other
Values as relative. <br />It is recommended to set the base as 16px and to use
rem for all other values. This will mean that you can then adjust all font sizes
by changing only the base value. <br />For example, you set the base as 16px,
Heading1 as 2.5rem and Paragraph as 1rem. This then outputs Heading1 as
2.5x16=40px and Paragraph as 16x1 = 16px. <br />Later, you decide you want to
font to be larger. So you change the base to 20px. Now, Heading1 will be
2.5x20=50px and Paragraph will be 20x1=20px <br />If you have all Values set,
this will make it much easier to control!

Default Value: 16px 1rem 2.5rem 2rem 1.75rem 1.5rem 1.25rem 1rem 1rem 1rem 1rem
14px

Max Length: 128

Max Values Accepted: 12

Validate All: css_size

Units and Ranges For css_size:

 * no-unit : 0 - 0 || Decimals: 0
 * px : 8 - 64 || Decimals: 0
 * % : 10 - 500 || Decimals: 3
 * vh : 2 - 10 || Decimals: 4
 * hw : 2 - 10 || Decimals: 4
 * rem : 0.3 - 8 || Decimals: 4

Value List:

 1.  Base
 2.  Paragraphs
 3.  # Header 1
 4.  ## Header 2
 5.  ### Header 3
 6.  #### Header 4
 7.  ##### Header 5
 8.  ###### Header 6
 9.  List item
 10. Link
 11. Quotes
 12. Code

CONTENT_TEXT_ALIGN

Sets how text sits on the page, especially when there are multiple lines.
Justify makes every line in a block of text take up the same width.

Default Value: left

Max Length: 7

Max Values Accepted: 1

Validate All: whitelisted_string

Permitted whitelisted_string Values:

 * right
 * center
 * justify

CONTENT_TEXT_SHADOW_COLOR

Sets the color of text shadow.

Max Length: 32

Max Values Accepted: 1

Validate One: color_namecolor_hexcolor_rgba

Requires: CONTENT_TEXT_SHADOW_OFFSET

CONTENT_TEXT_SHADOW_OFFSET

Sets the offset of text shadow.

Max Length: 32

Max Values Accepted: 2

Validate All: css_size

Requires: CONTENT_TEXT_SHADOW_COLOR

Units and Ranges For css_size:

 * px : -15 - 15 || Decimals: 0
 * % : -5 - 5 || Decimals: 3
 * vh : -2 - 2 || Decimals: 4
 * hw : -2 - 2 || Decimals: 4
 * rem : -2 - 2 || Decimals: 4

Value Mapping:

 1. Offset-X+Offset-Y
 2. Offset-X Offset-Y

CONTENT_TEXT_SHADOW_BLUR

Sets the blur of text shadow.

Max Length: 12

Max Values Accepted: 1

Validate All: css_size

Requires: CONTENT_TEXT_SHADOW_COLORCONTENT_TEXT_SHADOW_OFFSET

Units and Ranges For css_size:

 * px : 0 - 30 || Decimals: 0
 * % : 0 - 10 || Decimals: 3
 * vh : 0 - 5 || Decimals: 4
 * hw : 0 - 5 || Decimals: 4
 * rem : 0 - 3 || Decimals: 4

CONTENT_TEXT_COLOR

Sets the base text color. Inline text colors will override this.

Max Length: 128

Max Values Accepted: 2

Validate One: color_namecolor_hexcolor_rgba

Value Mapping:

 1. All Modes
 2. Light Dark

CONTENT_LINK_COLOR

Sets the base link color.

Max Length: 16

Max Values Accepted: 2

Validate One: color_namecolor_hexcolor_rgba

Value Mapping:

 1. All Modes
 2. Light Dark

CONTENT_BULLET_COLOR

Sets the bullet color for lists.

Max Length: 64

Max Values Accepted: 2

Validate One: color_namecolor_hexcolor_rgba

Value Mapping:

 1. All Modes
 2. Light Dark

CONTENT_LINK_BEHAVIOR

Sets whether links load in new pages, or on the same page. Internal links are
Rentry URLs, external links are anything else.

Default Value: same new

Max Length: 32

Max Values Accepted: 2

Validate All: whitelisted_string

Value Mapping:

 1. All Links
 2. Internal External

Permitted whitelisted_string Values:

 * same
 * new


GLOSSARY

Don't know what a term means? We'll list everything you need to know here.

 * Option: A metadata command, always in full capitals and with underscores for
   spaces, followed by the = sign. For example: PAGE_TITLE =
 * Value: The information you would like to apply to an Option. This is put
   after the first = sign and must not break to a new line.
 * Unit: The descriptor for a number. For example 2px means 2 pixels.
 * Unit: Px (Pixels): The little square dots a screen is made of. A phone
   normally has about 350 across and 700 down. A desktop is normally 1200-1600
   by 1000.
 * Unit: %: The percent of the container, or of the thing it is subordinate to
   (such as when used as a font size unit).
 * Unit: no-unit: When an option allows for a bare number, it will be listed as
   this (as when no-unit is not available, a bare number will be read as the
   default unit for that option). The default unit is always no-unit when this
   is available.
 * Unit: hw (Horizontal Width): The percentage of the full width of the page for
   the device that is viewing. On desktop, changing the window size will affect
   this.
 * Unit: vh (Vertical Height): The percentage of the full height of the page for
   the device that is viewing. On desktop, changing the window size will affect
   this.
 * Unit: rem (Root EM): A relative value based on the root font size. Affected
   by the font itself as the value is taken from width of the font's capital M.

Standalone: /metadata-how


Go

--------------------------------------------------------------------------------

new·what·how·langs·contacts



RENTRY.CO - MARKDOWN PASTE SERVICE