mirror of
https://github.com/cupcakearmy/autorestic.git
synced 2024-12-23 00:36:25 +00:00
72 lines
37 KiB
HTML
72 lines
37 KiB
HTML
|
<!DOCTYPE html><html><head><title>Autorestic | Markdown Cheat Sheet</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"><meta name="robots" content="index,follow"><meta name="theme-color" content="#212121"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><link href="https://fonts.googleapis.com/css?family=Hind:400,700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet"><style>
|
||
|
|
body, input, button {
|
||
|
|
font-family: 'Hind', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
code, .hljs {
|
||
|
|
font-family: 'Source Code Pro', 'Courier New', Courier, monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-font {
|
||
|
|
font-family: 'Material Icons';
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
font-size: 24px; /* Preferred icon size */
|
||
|
|
display: inline-block;
|
||
|
|
line-height: 1;
|
||
|
|
text-transform: none;
|
||
|
|
letter-spacing: normal;
|
||
|
|
word-wrap: normal;
|
||
|
|
white-space: nowrap;
|
||
|
|
direction: ltr;
|
||
|
|
|
||
|
|
/* Support for all WebKit browsers. */
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
/* Support for Safari and Chrome. */
|
||
|
|
text-rendering: optimizeLegibility;
|
||
|
|
|
||
|
|
/* Support for Firefox. */
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
|
||
|
|
/* Support for IE. */
|
||
|
|
font-feature-settings: 'liga';
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-font.outline {
|
||
|
|
font-family: 'Material Icons Outlined';
|
||
|
|
}
|
||
|
|
</style><link href="/autorestic/docs/assets/codedoc-styles.css" rel="stylesheet"><script async="" defer="" src="/autorestic/docs/assets/codedoc-bundle.js"></script></head><body><div class="header-0-0-4"><script async="" defer="" src="https://buttons.github.io/buttons.js"></script><a class="github-button" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="false" data-show-count="true" data-size="false" href="https://github.com/cupcakearmy/autorestic/">Star</a><br><br><a class="watermark-0-0-3" href="https://github.com/CONNECT-platform/codedoc" target="_blank">Created With<svg viewBox="0 0 536 296" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="codedoc" transform="translate(-244.000000, -364.000000)" fill-rule="nonzero"><path d="M580,532 C615.346224,532 644,560.653776 644,596 C644,631.346224 615.346224,660 580,660 C544.653776,660 516,631.346224 516,596 C516,560.653776 544.653776,532 580,532 Z M716,532 C751.346224,532 780,560.653776 780,596 C780,631.346224 751.346224,660 716,660 L692,660 C687.581722,660 684,656.418278 684,652 C684,647.581722 687.581722,644 692,644 L716,644 C742.509668,644 764,622.509668 764,596 C764,569.490332 742.509668,548 716,548 L692,548 C687.581722,548 684,544.418278 684,540 C684,535.581722 687.581722,532 692,532 L716,532 Z M468,532 C472.418278,532 476,535.581722 476,540 L476,652 C476,656.418278 472.418278,660 468,660 L444,660 C408.653776,660 380,631.346224 380,596 C380,560.653776 408.653776,532 444,532 L468,532 Z M332,532 C336.418278,532 340,535.581722 340,540 L340,652 C340,656.418278 336.418278,660 332,660 L252,660 C247.581722,660 244,656.418278 244,652 L244,540 C244,535.581722 247.581722,532 252,532 L332,532 Z M580,548 C553.490332,548 532,569.490332 532,596 C532,622.509668 553.490332,644 580,644 C606.509668,644 628,622.509668 628,596 C628,569.490332 606.509668,548 580,548 Z M461,548 L444,548 C417.490332,548 396,569.490332 396,596 C396,622.509668 417.490332,644 444,644 L461,644 L461,548 Z M444,364 C479.346224,364 508,392.653776 508,428 C508,463.346224 479.346224,492 444,492 C408.653776,492 380,463.346224 380,428 C380,392.653776 408.653776,364 444,364 Z M332,364 C336.418278,364 340,367.581722 340,372 C340,376.418278 336.418278,380 332,380 L308,380 C281.490332,380 260,401.490332 260,428 C260,454.509668 281.490332,476 308,476 L332,476 C336.418278,476 340,479.581722 340,484 C340,488.418278 336.418278,492 332,492 L308,492 C272.653776,492 244,463.346224 244,428 C244,392.653776 272.653776,364 308,364 L332,364 Z M580,364 C615.346224,364 644,392.653776 644,428 C644,463.346224 615.346224,492 580,492 L556,492 C551.581722,492 548,488.418278 548,484 L548,372 C548,367.581722 551.581722,364 556,364 L580,364 Z M772,364 C776.418278,364 780,367.581722 780,372 C780,376.418278 776.418278,380 772,380 L700,380 L700,420 L772,420 C776.418278,420 780,423.581722 780,428 C780,432.418278 776.418278,436 772,436 L700,436 L700,476 L772,476 C776.418278,476 780,479.581722 780,484 C780,488.418278 776.418278,492 772,492 L692,492 C687.581722,492 684,488.418278 684,484 L684,372 C684,367.581722 687.581722,364 692,364 L772,364 Z M444,380 C417.490332,380 396,401.490332 396,428 C396,454.509668 417.490332,476 444,476 C470.509668,476 492,454.509668 492,428 C492,401.490332 470.509668,380 444,380 Z M580,380 L563,380 L563,476 L580,476 C606.509668,476 628,454.509668 628,428 C628,401.490332 606.509668,380 580,380 Z"></path></g></svg></a></div><div id="-codedoc-container" class="container"><h1 id="markdown-cheat-sheet" class="heading-0-0-1"><span class="anchor-0-0-2" data-ignore-text=""><span class="icon-font" data-ignore-text="" style="vertical-align: sub">link</span></span>Markdown Cheat Sheet</h1><p>Checkout <code>docs/md/docs/cheat-sheet.md</code> to see the markdown behind this page. Note that this is only
|
||
|
|
a cheat-sheet, for a more complete list of specific markdown features of codedoc, check out the <a href="https://codedoc.cc">official docs</a>.</p><div style="text-align: right"><a class="button-0-0-14" href="https://codedoc.cc" target="_blank">Official Docs</a></div><marker><br>
|
||
|
|
|
||
|
|
</marker><blockquote><p>Do not forget to <strong>REMOVE THIS PAGE</strong> from your actual documentation!</p></blockquote><marker><hr>
|
||
|
|
|
||
|
|
</marker><h2 id="buttons" class="heading-0-0-1"><span class="anchor-0-0-2" data-ignore-text=""><span class="icon-font" data-ignore-text="" style="vertical-align: sub">link</span></span>Buttons</h2><p>You can add buttons to your documents like this:</p><pre class="with-bar"><code class="md code-0-0-10" tabindex="0"><span class="wmbar-0-0-13"><span></span><span></span><span></span><span>some-doc.md</span></span><div class="line-0-0-12 " data-content="> :Buttons"><span class="lineCounter-0-0-11 prim">1</span><span class="token blockquote punctuation">></span> :Buttons</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">2</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> > :Button label=Click Me!, url=https://www.google.com"><span class="lineCounter-0-0-11">3</span><span class="token blockquote punctuation">> ></span> :Button label=Click Me!, url=https://www.google.com</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">4</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> > :Button label=Click Me Too!, url=https://www.github.com"><span class="lineCounter-0-0-11 prim">5</span><span class="token blockquote punctuation">> ></span> :Button label=Click Me Too!, url=https://www.github.com</div><br></code></pre><p>Which looks like this:</p><div style="text-align: right"><a class="button-0-0-14" href="https://www.google.com" target="_blank">Click Me!</a><a class="button-0-0-14" href="https://www.github.com" target="_blank">Click Me Too!</a></div><marker><br>
|
||
|
|
|
||
|
|
</marker><p>You can create icon buttons as well. By default material icons are used:</p><pre class="with-bar"><code class="md code-0-0-10" tabindex="0"><span class="wmbar-0-0-13"><span></span><span></span><span></span><span>some-doc.md</span></span><div class="line-0-0-12 " data-content="> :Buttons"><span class="lineCounter-0-0-11 prim">1</span><span class="token blockquote punctuation">></span> :Buttons</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">2</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> > :Button icon=true, label=android, url=https://www.google.com"><span class="lineCounter-0-0-11">3</span><span class="token blockquote punctuation">> ></span> :Button icon=true, label=android, url=https://www.google.com</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">4</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> > :Button icon=true, label=code, url=https://www.github.com"><span class="lineCounter-0-0-11 prim">5</span><span class="token blockquote punctuation">> ></span> :Button icon=true, label=code, url=https://www.github.com</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">6</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> > :Button label=GitHub, url=https://www.github.com"><span class="lineCounter-0-0-11 prim">7</span><span class="token blockquote punctuation">> ></span> :Button label=GitHub, url=https://www.github.com</div><br></code></pre><p>Which looks like this:</p><div style="text-align: right"><a class="button-0-0-14 icon icon-font" href="https://www.google.com" target="_blank">android</a><a class="button-0-0-14 icon icon-font" href="https://www.github.com" target="_blank">code</a><a class="button-0-0-14" href="https://www.github.com" target="_blank">GitHub</a></div><marker><br>
|
||
|
|
|
||
|
|
</marker><p>You can add a copy button after a <code>code</code> element. This button would
|
||
|
|
copy the contents of the <code>code</code> element.</p><pre class="with-bar"><code class="md code-0-0-10" tabindex="0"><span class="wmbar-0-0-13"><span></span><span></span><span></span><span>some-doc.md</span></span><div class="line-0-0-12 " data-content="> :Buttons"><span class="lineCounter-0-0-11 prim">1</span><span class="token blockquote punctuation">></span> :Buttons</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">2</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> > :CopyButton"><span class="lineCounter-0-0-11 prim">3</span><span class="token blockquote punctuation">> ></span> :CopyButton</div><br></code></pre><div style="text-align: right"><button class="button-0-0-14 icon icon-font" onclick="smartCopy(this)">filter_none</button></div><marker><hr>
|
||
|
|
|
||
|
|
</marker><h2 id="tabs" class="heading-0-0-1"><span class="anchor-0-0-2" data-ignore-text=""><span class="icon-font" data-ignore-text="" style="vertical-align: sub">link</span></span>Tabs</h2><p>You can add tabbed content like this:</p><pre class="with-bar"><code class="md code-0-0-10" tabindex="0"><span class="wmbar-0-0-13"><span></span><span></span><span></span><span>some-doc.md</span></span><div class="line-0-0-12 " data-content="> :Tabs"><span class="lineCounter-0-0-11 prim">1</span><span class="token blockquote punctuation">></span> :Tabs</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">2</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> > :Tab title=First Tab"><span class="lineCounter-0-0-11">3</span><span class="token blockquote punctuation">> ></span> :Tab title=First Tab</div><br><div class="line-0-0-12 " data-content="> >"><span class="lineCounter-0-0-11">4</span><span class="token blockquote punctuation">> ></span></div><br><div class="line-0-0-12 " data-content="> > So this is the content of the first tab. Lets even have some code here:"><span class="lineCounter-0-0-11 prim">5</span><span class="token blockquote punctuation">> ></span> So this is the content of the first tab. Lets even have some code here:</div><br><div class="line-0-0-12 " data-content="> >"><span class="lineCounter-0-0-11">6</span><span class="token blockquote punctuation">> ></span></div><br><div class="line-0-0-12 " data-content="> > ```tsx | index.tsx"><span class="lineCounter-0-0-11">7</span><span class="token blockquote punctuation">> ></span> ```tsx | index.tsx</div><br><div class="line-0-0-12 " data-content="> > import { Renderer } from '@connectv/html'"><span class="lineCounter-0-0-11">8</span><span class="token blockquote punctuation">> ></span> import { Renderer } from '@connectv/html'</div><br><div class="line-0-0-12 " data-content="> >"><span class="lineCounter-0-0-11">9</span><span class="token blockquote punctuation">> ></span></div><br><div class="line-0-0-12 " data-content="> > const renderer = new Renderer()"><span class="lineCounter-0-0-11 prim">10</span><span class="token blockquote punctuation">> ></span> const renderer = new Renderer()</div><br><div class="line-0-0-12 " data-content="> > renderer.render(<div>Hellow World!</div>).on(document.body)"><span class="lineCounter-0-0-11">11</span><span class="token blockquote punctuation">> ></span> renderer.render(<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Hellow World!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>).on(document.body)</div><br><div class="line-0-0-12 " data-content="> > ```"><span class="lineCounter-0-0-11">12</span><span class="token blockquote punctuation">> ></span> ```</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">13</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> > :Tab title=Second Tab"><span class="lineCounter-0-0-11">14</span><span class="token blockquote punctuation">> ></span> :Tab title=Second Tab</div><br><div class="line-0-0-12 " data-content="> >"><span class="lineCounter-0-0-11 prim">15</span><span class="token blockquote punctuation">> ></span></div><br><div class="line-0-0-12 " data-content="> > Perhaps some other content here, maybe some more code?"><span class="lineCounter-0-0-11">16</span><span class="token blockquote punctuation">> ></span> Perhaps some other content here, maybe some more code?</div><br><div class="line-0-0-12 " data-content="> >"><span class="lineCounter-0-0-11">17</span><span class="token blockquote punctuation">> ></span></div><br><div class="line-0-0-12 " data-content="> > ```tsx | another.tsx"><span class="lineCounter-0-0-11">
|
||
|
|
|
||
|
|
</marker><div class="tabs-0-0-15"><script id="rAuwCHbHCx">(function(){function load(){if (window.__sdh_transport){window.__sdh_transport("rAuwCHbHCx", "MVgs1OFLDAYAeQUA+lgVCg==", {});} }; if (document.readyState == 'complete') load(); else window.addEventListener('load', load); })()</script><div class="tab first selected" data-tab-title="First Tab"><p>So this is the content of the first tab. Lets even have some code here:</p><pre class="with-bar"><code class="tsx code-0-0-10" tabindex="0"><span class="wmbar-0-0-13"><span></span><span></span><span></span><span>index.tsx</span></span><div class="line-0-0-12 " data-content="import { Renderer } from '@connectv/html'"><span class="lineCounter-0-0-11 prim">1</span><span class="token keyword">import</span> <span class="token punctuation">{</span> Renderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@connectv/html'</span></div><br><div class="line-0-0-12 " data-content=""><span class="lineCounter-0-0-11">2</span></div><br><div class="line-0-0-12 " data-content="const renderer = new Renderer()"><span class="lineCounter-0-0-11">3</span><span class="token keyword">const</span> renderer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Renderer</span><span class="token punctuation">(</span><span class="token punctuation">)</span></div><br><div class="line-0-0-12 " data-content="renderer.render(<div>Hellow World!</div>).on(document.body)"><span class="lineCounter-0-0-11 prim">4</span>renderer<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Hellow World!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">)</span></div><br></code></pre></div><div class="tab" data-tab-title="Second Tab"><p>Perhaps some other content here, maybe some more code?</p><pre class="with-bar"><code class="tsx code-0-0-10" tabindex="0"><span class="wmbar-0-0-13"><span></span><span></span><span></span><span>another.tsx</span></span><div class="line-0-0-12 " data-content="import { Renderer } from '@connectv/html'"><span class="lineCounter-0-0-11 prim">1</span><span class="token keyword">import</span> <span class="token punctuation">{</span> Renderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@connectv/html'</span></div><br><div class="line-0-0-12 " data-content="import { timer } from 'rxjs'"><span class="lineCounter-0-0-11">2</span><span class="token keyword">import</span> <span class="token punctuation">{</span> timer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rxjs'</span></div><br><div class="line-0-0-12 " data-content=""><span class="lineCounter-0-0-11">3</span></div><br><div class="line-0-0-12 " data-content="const renderer = new Renderer()"><span class="lineCounter-0-0-11">4</span><span class="token keyword">const</span> renderer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Renderer</span><span class="token punctuation">(</span><span class="token punctuation">)</span></div><br><div class="line-0-0-12 " data-content="renderer"><span class="lineCounter-0-0-11 prim">5</span>renderer</div><br><div class="line-0-0-12 " data-content=" .render(<div>You have been here for {timer(0, 1000)} second(s).</div>)"><span class="lineCounter-0-0-11">6</span> <span class="token punctuation">.</span><span class="token fun
|
||
|
|
|
||
|
|
</marker><h2 id="collapse" class="heading-0-0-1"><span class="anchor-0-0-2" data-ignore-text=""><span class="icon-font" data-ignore-text="" style="vertical-align: sub">link</span></span>Collapse</h2><p>You can add collapsible sections like this:</p><pre class="with-bar"><code class="md code-0-0-10" tabindex="0"><span class="wmbar-0-0-13"><span></span><span></span><span></span><span>some-doc.md</span></span><div class="line-0-0-12 " data-content="> :Collapse label=Collapsible content (click to open)"><span class="lineCounter-0-0-11 prim">1</span><span class="token blockquote punctuation">></span> :Collapse label=Collapsible content (click to open)</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">2</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> This content is collapsed by default. You can write _any_ markdown syntax you would"><span class="lineCounter-0-0-11">3</span><span class="token blockquote punctuation">></span> This content is collapsed by default. You can write <span class="token italic"><span class="token punctuation">_</span><span class="token content">any</span><span class="token punctuation">_</span></span> markdown syntax you would</div><br><div class="line-0-0-12 " data-content="> like here as this is simply just an enhanced `block quote` element. You can even have lists:"><span class="lineCounter-0-0-11">4</span><span class="token blockquote punctuation">></span> like here as this is simply just an enhanced <span class="token code keyword">`block quote`</span> element. You can even have lists:</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11 prim">5</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> - with multiple"><span class="lineCounter-0-0-11">6</span><span class="token blockquote punctuation">></span> <span class="token list punctuation">-</span> with multiple</div><br><div class="line-0-0-12 " data-content="> - items and stuff"><span class="lineCounter-0-0-11">7</span><span class="token blockquote punctuation">></span> <span class="token list punctuation">-</span> items and stuff</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">8</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> > :Collapse label=Or nested collapsible content (click to open)"><span class="lineCounter-0-0-11">9</span><span class="token blockquote punctuation">> ></span> :Collapse label=Or nested collapsible content (click to open)</div><br><div class="line-0-0-12 " data-content="> >"><span class="lineCounter-0-0-11 prim">10</span><span class="token blockquote punctuation">> ></span></div><br><div class="line-0-0-12 " data-content="> > > :Collapse label=Collapception"><span class="lineCounter-0-0-11">11</span><span class="token blockquote punctuation">> > ></span> :Collapse label=Collapception</div><br><div class="line-0-0-12 " data-content="> > >"><span class="lineCounter-0-0-11">12</span><span class="token blockquote punctuation">> > ></span></div><br><div class="line-0-0-12 " data-content="> > > To any depth that your heart might desire."><span class="lineCounter-0-0-11">13</span><span class="token blockquote punctuation">> > ></span> To any depth that your heart might desire.</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">14</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> This component is particularly useful in the table of contents (the left-side menu, activatable by"><span class="lineCounter-0-0-11 prim">15</span><span class="token blockquote punctuation">></span> This component is particularly useful in the table of contents (the left-side menu, activatable by</div><br><div class="line-0-0-12 " data-content="> clicking on the hamburger menu in the footer), when you have got many do
|
||
|
|
|
||
|
|
</marker><div class="collapse-0-0-16 "><script id="hkXNciAWjK">(function(){function load(){if (window.__sdh_transport){window.__sdh_transport("hkXNciAWjK", "fz894w7KG2/tX4kLbbA1Kg==", {});} }; if (document.readyState == 'complete') load(); else window.addEventListener('load', load); })()</script><div class="label" onclick="this.parentElement.classList.toggle('open')"><span class="text">Collapsible content (click to open)</span><span class="icon-font closed">chevron_right</span></div><div class="content"><p>This content is collapsed by default. You can write <em>any</em> markdown syntax you would
|
||
|
|
like here as this is simply just an enhanced <code>block quote</code> element. You can even have lists:</p><ul><li>with multiple</li><li>items and stuff</li></ul><div class="collapse-0-0-16 "><script id="GqOYAKiDCm">(function(){function load(){if (window.__sdh_transport){window.__sdh_transport("GqOYAKiDCm", "fz894w7KG2/tX4kLbbA1Kg==", {});} }; if (document.readyState == 'complete') load(); else window.addEventListener('load', load); })()</script><div class="label" onclick="this.parentElement.classList.toggle('open')"><span class="text">Or nested collapsible content (click to open)</span><span class="icon-font closed">chevron_right</span></div><div class="content"><div class="collapse-0-0-16 "><script id="WlRcZhGlpY">(function(){function load(){if (window.__sdh_transport){window.__sdh_transport("WlRcZhGlpY", "fz894w7KG2/tX4kLbbA1Kg==", {});} }; if (document.readyState == 'complete') load(); else window.addEventListener('load', load); })()</script><div class="label" onclick="this.parentElement.classList.toggle('open')"><span class="text">Collapception (click to open)</span><span class="icon-font closed">chevron_right</span></div><div class="content"><p>To any depth that your heart might desire.</p></div></div></div></div><p>This component is particularly useful in the table of contents (the left-side menu, activatable by
|
||
|
|
clicking on the hamburger menu in the footer), when you have got many documents and you would want to
|
||
|
|
neatly categorize them.</p></div></div><marker><hr>
|
||
|
|
|
||
|
|
</marker><h2 id="darklight-content" class="heading-0-0-1"><span class="anchor-0-0-2" data-ignore-text=""><span class="icon-font" data-ignore-text="" style="vertical-align: sub">link</span></span>Dark/Light Content</h2><p>If you have some content that differs in light mode vs in dark mode, you
|
||
|
|
can use <code>DarkLight</code> component:</p><pre class="with-bar"><code class="md code-0-0-10" tabindex="0"><span class="wmbar-0-0-13"><span></span><span></span><span></span><span>some-doc.md</span></span><div class="line-0-0-12 " data-content="> :DarkLight"><span class="lineCounter-0-0-11 prim">1</span><span class="token blockquote punctuation">></span> :DarkLight</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">2</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> > :InDark"><span class="lineCounter-0-0-11">3</span><span class="token blockquote punctuation">> ></span> :InDark</div><br><div class="line-0-0-12 " data-content="> >"><span class="lineCounter-0-0-11">4</span><span class="token blockquote punctuation">> ></span></div><br><div class="line-0-0-12 " data-content="> > We are SO DARK! This content is only shown in dark-mode. Switch to light-mode"><span class="lineCounter-0-0-11 prim">5</span><span class="token blockquote punctuation">> ></span> We are SO DARK! This content is only shown in dark-mode. Switch to light-mode</div><br><div class="line-0-0-12 " data-content="> > by clicking on the dark/light toggle in the footer to see the light-mode specific content."><span class="lineCounter-0-0-11">6</span><span class="token blockquote punctuation">> ></span> by clicking on the dark/light toggle in the footer to see the light-mode specific content.</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">7</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> > :InLight"><span class="lineCounter-0-0-11">8</span><span class="token blockquote punctuation">> ></span> :InLight</div><br><div class="line-0-0-12 " data-content="> >"><span class="lineCounter-0-0-11">9</span><span class="token blockquote punctuation">> ></span></div><br><div class="line-0-0-12 " data-content="> > LIGHT bless you! This content is only shown in light-mode. Switch to dark-mode"><span class="lineCounter-0-0-11 prim">10</span><span class="token blockquote punctuation">> ></span> LIGHT bless you! This content is only shown in light-mode. Switch to dark-mode</div><br><div class="line-0-0-12 " data-content="> > by clicking on the dark/light toggle in the footer to see the dark-mode specific content"><span class="lineCounter-0-0-11 prim">11</span><span class="token blockquote punctuation">> ></span> by clicking on the dark/light toggle in the footer to see the dark-mode specific content</div><br></code></pre><marker><br>
|
||
|
|
|
||
|
|
</marker><div class="darklight-0-0-17"><div class="dark"><p>We are SO DARK! This content is only shown in dark-mode. Switch to light-mode
|
||
|
|
by clicking on the dark/light toggle in the footer to see the light-mode specific content.</p></div><div class="light"><p>LIGHT bless you! This content is only shown in light-mode. Switch to dark-mode
|
||
|
|
by clicking on the dark/light toggle in the footer to see the dark-mode specific content</p></div></div><blockquote><p>If you are wondering why someone would <strong>EVER</strong> need such a thing, well I did. Because I wanted
|
||
|
|
to display different banner images based on dark-mode / light-mode:</p><pre class="with-bar"><code class="md code-0-0-10" tabindex="0"><span class="wmbar-0-0-13"><span></span><span></span><span></span><span></span></span><div class="line-0-0-12 " data-content="> :DarkLight"><span class="lineCounter-0-0-11 prim">1</span><span class="token blockquote punctuation">></span> :DarkLight</div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">2</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> > :InLight"><span class="lineCounter-0-0-11">3</span><span class="token blockquote punctuation">> ></span> :InLight</div><br><div class="line-0-0-12 " data-content="> >"><span class="lineCounter-0-0-11">4</span><span class="token blockquote punctuation">> ></span></div><br><div class="line-0-0-12 " data-content="> > "><span class="lineCounter-0-0-11 prim">5</span><span class="token blockquote punctuation">> ></span> <span class="token url"></span></div><br><div class="line-0-0-12 " data-content=">"><span class="lineCounter-0-0-11">6</span><span class="token blockquote punctuation">></span></div><br><div class="line-0-0-12 " data-content="> > :InDark"><span class="lineCounter-0-0-11">7</span><span class="token blockquote punctuation">> ></span> :InDark</div><br><div class="line-0-0-12 " data-content="> >"><span class="lineCounter-0-0-11">8</span><span class="token blockquote punctuation">> ></span></div><br><div class="line-0-0-12 " data-content="> > "><span class="lineCounter-0-0-11 prim">9</span><span class="token blockquote punctuation">> ></span> <span class="token url"></span></div><br></code></pre><div class="darklight-0-0-17"><div class="light"><p><img src="https://raw.githubusercontent.com/CONNECT-platform/codedoc/master/repo-banner.svg?sanitize=true" alt="header"></p></div><div class="dark"><p><img src="https://raw.githubusercontent.com/CONNECT-platform/codedoc/master/repo-banner-dark.svg?sanitize=true" alt="header"></p></div></div><p>Yeah I know the life of an idealist is never easy.</p></blockquote><marker><hr>
|
||
|
|
|
||
|
|
</marker><h2 id="navigation" class="heading-0-0-1"><span class="anchor-0-0-2" data-ignore-text=""><span class="icon-font" data-ignore-text="" style="vertical-align: sub">link</span></span>Navigation</h2><p>You can add <em>previous</em> and <em>next</em> buttons to your pages like this:</p><pre class=""><code class="markdown code-0-0-10" tabindex="0"><span class="wmbar-0-0-13"><span></span><span></span><span></span><span></span></span><div class="line-0-0-12 " data-content="> :ToCPrevNext"><span class="lineCounter-0-0-11 prim">1</span><span class="token blockquote punctuation">></span> :ToCPrevNext</div><br></code></pre><p>Which would then look like this:</p><script id="WefXQdMBwI">(function(){function load(){if (window.__sdh_transport){window.__sdh_transport("WefXQdMBwI", "qcaKEY878Mn2dFQW/lSrDg==", {});} }; if (document.readyState == 'complete') load(); else window.addEventListener('load', load); })()</script><div class="contentnav-0-0-9" data-no-search=""><a href="#markdown-cheat-sheet" class="h1" data-content-highlight="markdown-cheat-sheet">Markdown Cheat Sheet</a><a href="#buttons" class="h2" data-content-highlight="buttons">Buttons</a><a href="#tabs" class="h2" data-content-highlight="tabs">Tabs</a><a href="#collapse" class="h2" data-content-highlight="collapse">Collapse</a><a href="#darklight-content" class="h2" data-content-highlight="darklight-content">Dark/Light Content</a><a href="#navigation" class="h2" data-content-highlight="navigation">Navigation</a></div></div><div id="-codedoc-toc" class="toc-0-0-6"><div class="content-0-0-7"><p><a href="/autorestic/">Home</a>
|
||
|
|
<a href="/autorestic/quickstart">Getting Started</a>
|
||
|
|
<a href="/autorestic/docs/cheat-sheet">Markdown Cheat Sheet</a>
|
||
|
|
<a href="/autorestic/docs/code-features">Code Features</a></p></div><div class="search-0-0-8"><script id="OLNuZiBFAA">(function(){function load(){if (window.__sdh_transport){window.__sdh_transport("OLNuZiBFAA", "+SrlfVhZ/PRQ5WhUlZbTaA==", {"repo":"autorestic","user":"cupcakearmy","root":"docs/md","pick":"\\.md$","drop":"(^_)|(\\/_)"});} }; if (document.readyState == 'complete') load(); else window.addEventListener('load', load); })()</script></div></div><div class="footer-0-0-5"><div class="left"><script id="mcPSH_BmpD">(function(){function load(){if (window.__sdh_transport){window.__sdh_transport("mcPSH_BmpD", "XsNW3ht5ee+RmVUActEo9g==", {});} }; if (document.readyState == 'complete') load(); else window.addEventListener('load', load); })()</script></div><div class="main"><div class="inside"><a href="https://github.com/cupcakearmy/autorestic/" target="_blank">GitHub</a></div></div><div class="right"><script id="xqMBwDUAso">(function(){function load(){if (window.__sdh_transport){window.__sdh_transport("xqMBwDUAso", "Y1WWvCKxkgk1yh8xbCfXqw==", {});} }; if (document.readyState == 'complete') load(); else window.addEventListener('load', load); })()</script></div></div><script id="khvatdtSsX">(function(){function load(){if (window.__sdh_transport){window.__sdh_transport("khvatdtSsX", "v641FmLj+AeGp0uuFTI6ug==", {"namespace":"/autorestic"});} }; if (document.readyState == 'complete') load(); else window.addEventListener('load', load); })()</script></body></html>
|