Blog TitleThis is a longer description about your blog.2025-01-08T00:00:00Zhttps://example.com/Your NameSide Notes Internal Link Example ShortCodes2025-01-08T00:00:00Zhttps://example.com/blog/side-notes-internal/<h3 id="sit-amet" tabindex="-1">Sit Amet <a class="header-anchor" href="https://example.com/blog/side-notes-internal/#sit-amet"></a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><span class="newthought" id="sn-1b">Title Side Notes<label for="sn-1b" class="margin-toggle sidenote-number"></label></span><input type="checkbox" class="margin-toggle"><span class="sidenote"><a href="https://example.com/blog/side-notes-internal/#sn-1b" class="no-deco"><em>Side Notes Information</em></a></span>, This is a example content article for your side notes features.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><span class="newthought" id="sn-2b">Title Side Notes 2<label for="sn-2b" class="margin-toggle sidenote-number"></label></span><input type="checkbox" class="margin-toggle"><span class="sidenote"><a href="https://example.com/blog/side-notes-internal/#sn-2b" class="no-deco"><em>Side Notes Information 2</em></a></span>, 2. This is a example content article for your side notes features.</p>
<h3 id="side-note-code-format" tabindex="-1">Side Note Code Format <a class="header-anchor" href="https://example.com/blog/side-notes-internal/#side-note-code-format"></a></h3>
<pre><code><span class="newthought" id="sn-1b" >Title Side Notes<label for="sn-1b" class="margin-toggle sidenote-number"></label></span><input type="checkbox" class="margin-toggle"/><span class="sidenote"><a href="#sn-1b" class="no-deco"><em>Side Notes Information</em></a></span>, This is a example content article for your side notes features.
</code></pre>
Side Notes External Link Example ShortCodes2025-01-08T00:00:00Zhttps://example.com/blog/side-notes-external/<h3 id="sit-amet" tabindex="-1">Sit Amet <a class="header-anchor" href="https://example.com/blog/side-notes-external/#sit-amet"></a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><span class="newthought">Title Side Notes<label for="sn-1b" class="margin-toggle sidenote-number"></label></span><input type="checkbox" id="sn-1b" class="margin-toggle"><span class="sidenote"><em>Side Notes Information</em> <a href="https://adamdjbrett.com">Check this url</a></span>, This is a example content article for your side notes features.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><span class="newthought">Title Side Notes part two<label for="sn-2b" class="margin-toggle sidenote-number"></label></span><input type="checkbox" id="sn-2b" class="margin-toggle"><span class="sidenote"><em>Side Notes Two Information</em> <a href="https://adamdjbrett.com">Check this url two</a></span>, This is a example content article two for your side notes features.</p>
<h3 id="side-note-code-format" tabindex="-1">Side Note Code Format <a class="header-anchor" href="https://example.com/blog/side-notes-external/#side-note-code-format"></a></h3>
<pre><code><span class="newthought">Title Side Notes<label for="sn-1b" class="margin-toggle sidenote-number"></label></span><input type="checkbox" id="sn-1b" class="margin-toggle"/><span class="sidenote"><em>Side Notes Information</em> <a href="https://adamdjbrett.com">Check this url</a></span>, This is a example content article for your side notes features.
</code></pre>
Side Notes Example ShortCodes2025-01-08T00:00:00Zhttps://example.com/blog/side-notes-example/<h3 id="sit-amet" tabindex="-1">Sit Amet <a class="header-anchor" href="https://example.com/blog/side-notes-example/#sit-amet"></a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><span class="newthought">Title Side Notes<label for="sn-1b" class="margin-toggle sidenote-number"></label></span><input type="checkbox" id="sn-1b" class="margin-toggle"><span class="sidenote"><a href="https://example.com/blog/side-notes-example/#sn-1b" class="no-deco"><em>Side Notes Information</em></a></span>, This is a example content article for your side notes features.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3 id="side-note-code-format" tabindex="-1">Side Note Code Format <a class="header-anchor" href="https://example.com/blog/side-notes-example/#side-note-code-format"></a></h3>
<pre><code><span class="newthought">Title Side Notes<label for="sn-1b" class="margin-toggle sidenote-number"></label></span><input type="checkbox" id="sn-1b" class="margin-toggle"/><span class="sidenote"><a href="#sn-1b" class="no-deco"><em>Side Notes Information</em></a></span>, This is a example content article for your side notes features.
</code></pre>
Notes Example ShortCodes2025-01-08T00:00:00Zhttps://example.com/blog/notes-example/<h3 id="ipsum-dolor" tabindex="-1">Ipsum Dolor <a class="header-anchor" href="https://example.com/blog/notes-example/#ipsum-dolor"></a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><label for="1s" class="margin-toggle">⊕</label><input type="checkbox" id="1s" class="margin-toggle"><span class="marginnote">This is a example for notes features.</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3 id="notes-code-format" tabindex="-1">Notes Code Format <a class="header-anchor" href="https://example.com/blog/notes-example/#notes-code-format"></a></h3>
<pre><code><label for="1s" class="margin-toggle">&#8853;</label><input type="checkbox" id="1s" class="margin-toggle"/><span class="marginnote">This is a example for notes features.</span>
</code></pre>
Epigraph Example ShortCodes2025-01-08T00:00:00Zhttps://example.com/blog/epigraph/<h3 id="epigraph-shortcode" tabindex="-1">Epigraph ShortCode <a class="header-anchor" href="https://example.com/blog/epigraph/#epigraph-shortcode"></a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="epigraph"><blockquote><p>The English language . . . becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.</p><footer>George Orwell, 'Politics and the English Language'</footer></blockquote></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3 id="epigraph-code-format" tabindex="-1">Epigraph Code Format <a class="header-anchor" href="https://example.com/blog/epigraph/#epigraph-code-format"></a></h3>
<pre><code><div class="epigraph"><blockquote><p>The English language . . . becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.</p><footer>George Orwell, 'Politics and the English Language'</footer></blockquote></div>
</code></pre>
Epigraph with URL Link Example ShortCodes2025-01-08T00:00:00Zhttps://example.com/blog/epigraph-link/<h3 id="epigraph-with-url-link-shortcode" tabindex="-1">Epigraph with URL Link ShortCode <a class="header-anchor" href="https://example.com/blog/epigraph-link/#epigraph-with-url-link-shortcode"></a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="epigraph"><blockquote><p>The English language . . . becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.</p><footer>George Orwell, 'Politics and the English Language' <a href="https://adamdjbrett.com">Click Me</a></footer></blockquote></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3 id="epigraph-code-format" tabindex="-1">Epigraph Code Format <a class="header-anchor" href="https://example.com/blog/epigraph-link/#epigraph-code-format"></a></h3>
<pre><code><div class="epigraph"><blockquote><p>The English language . . . becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.</p><footer>George Orwell, 'Politics and the English Language' <a href="https://adamdjbrett.com">Click Me</a></footer></blockquote></div>
</code></pre>
Code Example2025-01-08T00:00:00Zhttps://example.com/blog/code/<p>Code</p>
<pre><code><pre>
<code>
This is code
</code>
</pre>
</code></pre>
<p>and 11ty code blocks also work</p>
<h2 id="js" tabindex="-1">JS <a class="header-anchor" href="https://example.com/blog/code/#js"></a></h2>
<pre class="language-js" tabindex="0"><code class="language-js"><span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<h2 id="python" tabindex="-1">Python <a class="header-anchor" href="https://example.com/blog/code/#python"></a></h2>
<pre class="language-python" tabindex="0"><code class="language-python"><span class="token keyword">print</span><span class="token punctuation">(</span><span class="token string">"This line will be printed."</span><span class="token punctuation">)</span></code></pre>
Blockquote Example ShortCodes2025-01-08T00:00:00Zhttps://example.com/blog/blockquote/<h3 id="blockquote-shortcode" tabindex="-1">Blockquote ShortCode <a class="header-anchor" href="https://example.com/blog/blockquote/#blockquote-shortcode"></a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 id="shortcode-blockquote" tabindex="-1">Shortcode BlockQuote <a class="header-anchor" href="https://example.com/blog/blockquote/#shortcode-blockquote"></a></h4>
<blockquote><p>The English language . . . becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.</p><footer>George Orwell, 'Politics and the English Language'</footer></blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 id="default-blockquote" tabindex="-1">Default BlockQuote <a class="header-anchor" href="https://example.com/blog/blockquote/#default-blockquote"></a></h4>
<blockquote>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<blockquote>
<p>Gets Tufte 11ty</p>
</blockquote>
</blockquote>
<h4 id="blockquote-code-format" tabindex="-1">Blockquote Code Format <a class="header-anchor" href="https://example.com/blog/blockquote/#blockquote-code-format"></a></h4>
<pre><code><blockquote><p>The English language . . . becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.</p><footer>George Orwell, 'Politics and the English Language'</footer></blockquote>
</code></pre>
Blockquote Example ShortCodes2025-01-08T00:00:00Zhttps://example.com/blog/blockquote-link/<h3 id="blockquote-with-url-link-shortcode" tabindex="-1">Blockquote with URL Link ShortCode <a class="header-anchor" href="https://example.com/blog/blockquote-link/#blockquote-with-url-link-shortcode"></a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 id="shortcode-blockquote-with-url-link" tabindex="-1">Shortcode BlockQuote with URL Link <a class="header-anchor" href="https://example.com/blog/blockquote-link/#shortcode-blockquote-with-url-link"></a></h4>
<blockquote><p>The English language . . . becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.</p><footer>George Orwell, 'Politics and the English Language' <a href="https://adamdjbrett.com">Click Me</a></footer></blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 id="default-blockquote-with-url-link" tabindex="-1">Default BlockQuote with URL Link <a class="header-anchor" href="https://example.com/blog/blockquote-link/#default-blockquote-with-url-link"></a></h4>
<blockquote>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<blockquote>
<p><a href="https://github.com/adamdjbrett/11ty-gets-tufte/">Gets Tufte 11ty</a></p>
</blockquote>
</blockquote>
<h4 id="blockquote-with-url-link-code-format" tabindex="-1">Blockquote with URL Link Code Format <a class="header-anchor" href="https://example.com/blog/blockquote-link/#blockquote-with-url-link-code-format"></a></h4>
<pre><code><blockquote><p>The English language . . . becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.</p><footer>George Orwell, 'Politics and the English Language' <a href="https://adamdjbrett.com">Click Me</a></footer></blockquote>
</code></pre>
Video Example ShortCodes2025-01-07T00:00:00Zhttps://example.com/blog/video/<h3 id="sed-do-eiusmod" tabindex="-1">Sed Do Eiusmod <a class="header-anchor" href="https://example.com/blog/video/#sed-do-eiusmod"></a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<figure class="iframe-wrapper"><iframe width="100%" height="auto" src="https://www.youtube.com/embed/7hiUvyxRIOY" title="title of your video" frameborder="0" allowfullscreen=""></iframe><figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3 id="video-code-format" tabindex="-1">Video Code Format <a class="header-anchor" href="https://example.com/blog/video/#video-code-format"></a></h3>
<pre><code><figure class="iframe-wrapper"><iframe width="100%" height="auto" src="https://www.youtube.com/embed/7hiUvyxRIOY" title="title of your video" frameborder="0" allowfullscreen></iframe><figure>
</code></pre>
</figure></figure>