Zawn

Side Notes Internal Link Example ShortCodes

2025-01-08T00:00:00Z

Sit Amet

Duis aute irure dolor in reprehenderit, in voluptate velit esseShow noteThis margin note links back to its phrase in the text., cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Side Note Code Format

The shortcode goes inside a sentence. The note in the margin links back to the phrase it annotates.

{% sidenoteinternal "1b", "in voluptate velit esse", "This margin note links back to its phrase." , "cillum dolore eu fugiat nulla pariatur" %}

Side Notes External Link Example ShortCodes

2025-01-08T00:00:00Z

Sit Amet

Duis aute irure dolor in reprehenderit, in voluptate velit esseShow noteThis margin note carries a link out: an example site, cillum dolore eu fugiat nulla pariatur . Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Side Note Code Format

The shortcode goes inside a sentence. The note in the margin ends with a link to an external page.

{% sidenoteexternal "1b", "in voluptate velit esse", "This margin note carries a link out:", "cillum dolore eu fugiat nulla pariatur", "an example site" , "https://example.com/" %}

Side Notes Example ShortCodes

2025-01-08T00:00:00Z

Sit Amet

Duis aute irure dolor in reprehenderit, in voluptate velit esseShow noteThis note sits in the right margin, next to the phrase it annotates. On a narrow screen, tap the notebook symbol to expand it., cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Side Note Code Format

The shortcode goes inside a sentence. The second argument is the phrase the note attaches to; the fourth continues the sentence after the note marker.

{% sidenote "1b", "in voluptate velit esse", "This note sits in the right margin." , "cillum dolore eu fugiat nulla pariatur" %}

Notes Example ShortCodes

2025-01-08T00:00:00Z

Ipsum Dolor

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.

Show noteThis is a example for notes features.

Notes Code Format

<label for="1s" class="margin-toggle"><span aria-hidden="true">&#128221;</span><span class="visually-hidden">Show note</span></label><input type="checkbox" id="1s" class="margin-toggle"/><span class="marginnote">This is a example for notes features.</span>

Epigraph Example ShortCodes

2025-01-08T00:00:00Z

Epigraph ShortCode

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.
George Orwell, 'Politics and the English Language'

Epigraph Code Format

<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>

Epigraph with URL Link Example ShortCodes

2025-01-08T00:00:00Z

Epigraph with URL Link ShortCode

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.
George Orwell, 'Politics and the English Language' Click Me

Epigraph Code Format

<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://example.com/">Click Me</a></footer></blockquote></div>

Code Example

2025-01-08T00:00:00Z

Code

<pre>
    <code>
This is code
    </code>
</pre>

and 11ty code blocks also work

JS

function myFunction() {
	return true;
}

Python

print("This line will be printed.")

Blockquote Example ShortCodes

2025-01-08T00:00:00Z

Blockquote ShortCode

Shortcode BlockQuote

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.
George Orwell, 'Politics and the English Language'

Default BlockQuote

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.
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.
Example Author

Blockquote Code Format

<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>

Blockquote Example ShortCodes

2025-01-08T00:00:00Z

Blockquote with URL Link ShortCode

Shortcode BlockQuote with URL Link

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.
George Orwell, 'Politics and the English Language' Click Me

Default BlockQuote with URL Link

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.
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.
Example Author

Blockquote with URL Link Code Format

<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://example.com/">Click Me</a></footer></blockquote>

Video Example ShortCodes

2025-01-07T00:00:00Z

Sed Do Eiusmod

Video Code Format

<figure class="iframe-wrapper"><iframe src="https://www.youtube.com/embed/7hiUvyxRIOY" title="title of your video" loading="lazy" allowfullscreen></iframe></figure>

Zawn

Side Notes Internal Link Example ShortCodes

Sit Amet #

Side Note Code Format #

Side Notes External Link Example ShortCodes

Sit Amet #

Side Note Code Format #

Side Notes Example ShortCodes

Sit Amet #

Side Note Code Format #

Notes Example ShortCodes

Ipsum Dolor #

Notes Code Format #

Epigraph Example ShortCodes

Epigraph ShortCode #

Epigraph Code Format #

Epigraph with URL Link Example ShortCodes

Epigraph with URL Link ShortCode #

Epigraph Code Format #

Code Example

JS #

Python #

Blockquote Example ShortCodes

Blockquote ShortCode #

Shortcode BlockQuote #

Default BlockQuote #

Blockquote Code Format #

Blockquote Example ShortCodes

Blockquote with URL Link ShortCode #

Shortcode BlockQuote with URL Link #

Default BlockQuote with URL Link #

Blockquote with URL Link Code Format #

Video Example ShortCodes

Sed Do Eiusmod #

Video Code Format #

Sit Amet

Side Note Code Format

Sit Amet

Side Note Code Format

Sit Amet

Side Note Code Format

Ipsum Dolor

Notes Code Format

Epigraph ShortCode

Epigraph Code Format

Epigraph with URL Link ShortCode

Epigraph Code Format

JS

Python

Blockquote ShortCode

Shortcode BlockQuote

Default BlockQuote

Blockquote Code Format

Blockquote with URL Link ShortCode

Shortcode BlockQuote with URL Link

Default BlockQuote with URL Link

Blockquote with URL Link Code Format

Sed Do Eiusmod

Video Code Format