asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions
web/_site/posts/write-a-new-post/index.html

270 lines
72 KiB
HTML
Raw Normal View History

built latest static sources from main
2024-11-15 20:29:28 +03:00
<!doctype html><html lang="en" ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7" /><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e" /><meta name="mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /><meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover" /><meta name="generator" content="Jekyll v4.3.4" /><meta property="og:title" content="Writing a New Post" /><meta name="author" content="cotes" /><meta property="og:locale" content="en" /><meta name="description" content="This tutorial will guide you how to write a post in the Chirpy template, and it’s worth reading even if you’ve used Jekyll before, as many features require specific variables to be set." /><meta property="og:description" content="This tutorial will guide you how to write a post in the Chirpy template, and it’s worth reading even if you’ve used Jekyll before, as many features require specific variables to be set." /><link rel="canonical" href="https://asandikci.com/posts/write-a-new-post/" /><meta property="og:url" content="https://asandikci.com/posts/write-a-new-post/" /><meta property="og:site_name" content="Aliberk Sandıkçı" /><meta property="og:type" content="article" /><meta property="article:published_time" content="2019-08-08T09:10:00+03:00" /><meta name="twitter:card" content="summary" /><meta property="twitter:title" content="Writing a New Post" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"cotes"},"dateModified":"2024-07-02T01:00:39+03:00","datePublished":"2019-08-08T09:10:00+03:00","description":"This tutorial will guide you how to write a post in the Chirpy template, and it’s worth reading even if you’ve used Jekyll before, as many features require specific variables to be set.","headline":"Writing a New Post","mainEntityOfPage":{"@type":"WebPage","@id":"https://asandikci.com/posts/write-a-new-post/"},"url":"https://asandikci.com/posts/write-a-new-post/"}</script><title>Writing a New Post | Aliberk Sandıkçı</title><link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png"><link rel="manifest" href="/assets/img/favicons/site.webmanifest"><link rel="shortcut icon" href="/assets/img/favicons/favicon.ico"><meta name="apple-mobile-web-app-title" content="Aliberk Sandıkçı"><meta name="application-name" content="Aliberk Sandıkçı"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml"><meta name="theme-color" content="#ffffff"><link rel="preconnect" href="https://fonts.googleapis.com" ><link rel="dns-prefetch" href="https://fonts.googleapis.com" ><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="dns-prefetch" href="https://fonts.gstatic.com" ><link rel="preconnect" href="https://cdn.jsdelivr.net" ><link rel="dns-prefetch" href="https://cdn.jsdelivr.net" ><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-logos@1/assets/font-logos.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/all.min.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous" /><link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css" /><link rel="stylesheet" href="/assets/css/jekyll-theme-chirpy.css" /><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap" /><link rel="
2
3
4
5
6
</pre><td class="rouge-code"><pre><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s">TITLE</span>
<span class="na">date</span><span class="pi">:</span> <span class="s">YYYY-MM-DD HH:MM:SS +/-TTTT</span>
<span class="na">categories</span><span class="pi">:</span> <span class="pi">[</span><span class="nv">TOP_CATEGORIE</span><span class="pi">,</span> <span class="nv">SUB_CATEGORIE</span><span class="pi">]</span>
<span class="na">tags</span><span class="pi">:</span> <span class="pi">[</span><span class="nv">TAG</span><span class="pi">]</span> <span class="c1"># TAG names should always be lowercase</span>
<span class="nn">---</span>
</pre></table></code></div></div><blockquote class="prompt-tip"><p>The posts’ <em>layout</em> has been set to <code class="language-plaintext highlighter-rouge">post</code> by default, so there is no need to add the variable <em>layout</em> in the Front Matter block.</p></blockquote><h3 id="timezone-of-date"><span class="me-2">Timezone of Date</span><a href="#timezone-of-date" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>To accurately record the release date of a post, you should not only set up the <code class="language-plaintext highlighter-rouge">timezone</code> of <code class="language-plaintext filepath highlighter-rouge">_config.yml</code> but also provide the post’s timezone in variable <code class="language-plaintext highlighter-rouge">date</code> of its Front Matter block. Format: <code class="language-plaintext highlighter-rouge">+/-TTTT</code>, e.g. <code class="language-plaintext highlighter-rouge">+0800</code>.</p><h3 id="categories-and-tags"><span class="me-2">Categories and Tags</span><a href="#categories-and-tags" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>The <code class="language-plaintext highlighter-rouge">categories</code> of each post are designed to contain up to two elements, and the number of elements in <code class="language-plaintext highlighter-rouge">tags</code> can be zero to infinity. For instance:</p><div class="language-yaml highlighter-rouge"><div class="code-header"> <span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre><td class="rouge-code"><pre><span class="nn">---</span>
<span class="na">categories</span><span class="pi">:</span> <span class="pi">[</span><span class="nv">Animal</span><span class="pi">,</span> <span class="nv">Insect</span><span class="pi">]</span>
<span class="na">tags</span><span class="pi">:</span> <span class="pi">[</span><span class="nv">bee</span><span class="pi">]</span>
<span class="nn">---</span>
</pre></table></code></div></div><h3 id="author-information"><span class="me-2">Author Information</span><a href="#author-information" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>The author information of the post usually does not need to be filled in the <em>Front Matter</em> , they will be obtained from variables <code class="language-plaintext highlighter-rouge">social.name</code> and the first entry of <code class="language-plaintext highlighter-rouge">social.links</code> of the configuration file by default. But you can also override it as follows:</p><p>Adding author information in <code class="language-plaintext highlighter-rouge">_data/authors.yml</code> (If your website doesn’t have this file, don’t hesitate to create one).</p><div file="_data/authors.yml" class="language-yaml highlighter-rouge"><div class="code-header"> <span data-label-text="_data/authors.yml"><i class="far fa-file-code fa-fw"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre><td class="rouge-code"><pre><span class="na">&lt;author_id&gt;</span><span class="pi">:</span>
<span class="na">name</span><span class="pi">:</span> <span class="s">&lt;full name&gt;</span>
<span class="na">twitter</span><span class="pi">:</span> <span class="s">&lt;twitter_of_author&gt;</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">&lt;homepage_of_author&gt;</span>
</pre></table></code></div></div><p>And then use <code class="language-plaintext highlighter-rouge">author</code> to specify a single entry or <code class="language-plaintext highlighter-rouge">authors</code> to specify multiple entries:</p><div class="language-yaml highlighter-rouge"><div class="code-header"> <span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
</pre><td class="rouge-code"><pre><span class="nn">---</span>
<span class="na">author</span><span class="pi">:</span> <span class="s">&lt;author_id&gt;</span> <span class="c1"># for single entry</span>
<span class="c1"># or</span>
<span class="na">authors</span><span class="pi">:</span> <span class="pi">[</span><span class="nv">&lt;author1_id&gt;</span><span class="pi">,</span> <span class="nv">&lt;author2_id&gt;</span><span class="pi">]</span> <span class="c1"># for multiple entries</span>
<span class="nn">---</span>
</pre></table></code></div></div><p>Having said that, the key <code class="language-plaintext highlighter-rouge">author</code> can also identify multiple entries.</p><blockquote class="prompt-info"><p>The benefit of reading the author information from the file <code class="language-plaintext filepath highlighter-rouge">_data/authors.yml</code> is that the page will have the meta tag <code class="language-plaintext highlighter-rouge">twitter:creator</code>, which enriches the <a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#card-and-content-attribution">Twitter Cards</a> and is good for SEO.</p></blockquote><h3 id="post-description"><span class="me-2">Post Description</span><a href="#post-description" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>By default, the first words of the post are used to display on the home page for a list of posts, in the <em>Further Reading</em> section, and in the XML of the RSS feed. If you don’t want to display the auto-generated description for the post, you can customize it using the <code class="language-plaintext highlighter-rouge">description</code> field in the <em>Front Matter</em> as follows:</p><div class="language-yaml highlighter-rouge"><div class="code-header"> <span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
</pre><td class="rouge-code"><pre><span class="nn">---</span>
<span class="na">description</span><span class="pi">:</span> <span class="s">Short summary of the post.</span>
<span class="nn">---</span>
</pre></table></code></div></div><p>Additionally, the <code class="language-plaintext highlighter-rouge">description</code> text will also be displayed under the post title on the post’s page.</p><h2 id="table-of-contents"><span class="me-2">Table of Contents</span><a href="#table-of-contents" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>By default, the <strong>T</strong>able <strong>o</strong>f <strong>C</strong>ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to <code class="language-plaintext filepath highlighter-rouge">_config.yml</code> and set the value of variable <code class="language-plaintext highlighter-rouge">toc</code> to <code class="language-plaintext highlighter-rouge">false</code>. If you want to turn off TOC for a specific post, add the following to the post’s <a href="https://jekyllrb.com/docs/front-matter/">Front Matter</a>:</p><div class="language-yaml highlighter-rouge"><div class="code-header"> <span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
</pre><td class="rouge-code"><pre><span class="nn">---</span>
<span class="na">toc</span><span class="pi">:</span> <span class="kc">false</span>
<span class="nn">---</span>
</pre></table></code></div></div><h2 id="comments"><span class="me-2">Comments</span><a href="#comments" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>The global switch of comments is defined by variable <code class="language-plaintext highlighter-rouge">comments.active</code> in the file <code class="language-plaintext filepath highlighter-rouge">_config.yml</code>. After selecting a comment system for this variable, comments will be turned on for all posts.</p><p>If you want to close the comment for a specific post, add the following to the <strong>Front Matter</strong> of the post:</p><div class="language-yaml highlighter-rouge"><div class="code-header"> <span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
</pre><td class="rouge-code"><pre><span class="nn">---</span>
<span class="na">comments</span><span class="pi">:</span> <span class="kc">false</span>
<span class="nn">---</span>
</pre></table></code></div></div><h2 id="media"><span class="me-2">Media</span><a href="#media" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>We refer to images, audio and video as media resources in <em>Chirpy</em>.</p><h3 id="url-prefix"><span class="me-2">URL Prefix</span><a href="#url-prefix" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>From time to time we have to define duplicate URL prefixes for multiple resources in a post, which is a boring task that you can avoid by setting two parameters.</p><ul><li><p>If you are using a CDN to host media files, you can specify the <code class="language-plaintext highlighter-rouge">cdn</code> in <code class="language-plaintext filepath highlighter-rouge">_config.yml</code>. The URLs of media resources for site avatar and posts are then prefixed with the CDN domain name.</p><div class="language-yaml nolineno highlighter-rouge" file="_config.yml"><div class="code-header"> <span data-label-text="_config.yml"><i class="far fa-file-code fa-fw"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="na">cdn</span><span class="pi">:</span> <span class="s">https://cdn.com</span>
</pre></table></code></div></div><li><p>To specify the resource path prefix for the current post/page range, set <code class="language-plaintext highlighter-rouge">media_subpath</code> in the <em>front matter</em> of the post:</p><div class="language-yaml nolineno highlighter-rouge"><div class="code-header"> <span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
</pre><td class="rouge-code"><pre><span class="nn">---</span>
<span class="na">media_subpath</span><span class="pi">:</span> <span class="s">/path/to/media/</span>
<span class="nn">---</span>
</pre></table></code></div></div></ul><p>The option <code class="language-plaintext highlighter-rouge">site.cdn</code> and <code class="language-plaintext highlighter-rouge">page.media_subpath</code> can be used individually or in combination to flexibly compose the final resource URL: <code class="language-plaintext highlighter-rouge">[site.cdn/][page.media_subpath/]file.ext</code></p><h3 id="images"><span class="me-2">Images</span><a href="#images" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><h4 id="caption"><span class="me-2">Caption</span><a href="#caption" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>Add italics to the next line of an image, then it will become the caption and appear at the bottom of the image:</p><div class="language-markdown nolineno highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
</pre><td class="rouge-code"><pre><span class="p">![</span><span class="nv">img-description</span><span class="p">](</span><span class="sx">/path/to/image</span><span class="p">)</span>
<span class="ge">_Image Caption_</span>
</pre></table></code></div></div><h4 id="size"><span class="me-2">Size</span><a href="#size" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>To prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image.</p><div class="language-markdown nolineno highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="p">![</span><span class="nv">Desktop View</span><span class="p">](</span><span class="sx">/assets/img/sample/mockup.png</span><span class="p">)</span>{: width="700" height="400" }
</pre></table></code></div></div><blockquote class="prompt-info"><p>For an SVG, you have to at least specify its <em>width</em>, otherwise it won’t be rendered.</p></blockquote><p>Starting from <em>Chirpy v5.0.0</em>, <code class="language-plaintext highlighter-rouge">height</code> and <code class="language-plaintext highlighter-rouge">width</code> support abbreviations (<code class="language-plaintext highlighter-rouge">height</code> → <code class="language-plaintext highlighter-rouge">h</code>, <code class="language-plaintext highlighter-rouge">width</code> → <code class="language-plaintext highlighter-rouge">w</code>). The following example has the same effect as the above:</p><div class="language-markdown nolineno highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="p">![</span><span class="nv">Desktop View</span><span class="p">](</span><span class="sx">/assets/img/sample/mockup.png</span><span class="p">)</span>{: w="700" h="400" }
</pre></table></code></div></div><h4 id="position"><span class="me-2">Position</span><a href="#position" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>By default, the image is centered, but you can specify the position by using one of the classes <code class="language-plaintext highlighter-rouge">normal</code>, <code class="language-plaintext highlighter-rouge">left</code>, and <code class="language-plaintext highlighter-rouge">right</code>.</p><blockquote class="prompt-warning"><p>Once the position is specified, the image caption should not be added.</p></blockquote><ul><li><p><strong>Normal position</strong></p><p>Image will be left aligned in below sample:</p><div class="language-markdown nolineno highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="p">![</span><span class="nv">Desktop View</span><span class="p">](</span><span class="sx">/assets/img/sample/mockup.png</span><span class="p">)</span>{: .normal }
</pre></table></code></div></div><li><p><strong>Float to the left</strong></p><div class="language-markdown nolineno highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="p">![</span><span class="nv">Desktop View</span><span class="p">](</span><span class="sx">/assets/img/sample/mockup.png</span><span class="p">)</span>{: .left }
</pre></table></code></div></div><li><p><strong>Float to the right</strong></p><div class="language-markdown nolineno highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="p">![</span><span class="nv">Desktop View</span><span class="p">](</span><span class="sx">/assets/img/sample/mockup.png</span><span class="p">)</span>{: .right }
</pre></table></code></div></div></ul><h4 id="darklight-mode"><span class="me-2">Dark/Light mode</span><a href="#darklight-mode" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>You can make images follow theme preferences in dark/light mode. This requires you to prepare two images, one for dark mode and one for light mode, and then assign them a specific class (<code class="language-plaintext highlighter-rouge">dark</code> or <code class="language-plaintext highlighter-rouge">light</code>):</p><div class="language-markdown highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
</pre><td class="rouge-code"><pre><span class="p">![</span><span class="nv">Light mode only</span><span class="p">](</span><span class="sx">/path/to/light-mode.png</span><span class="p">)</span>{: .light }
<span class="p">![</span><span class="nv">Dark mode only</span><span class="p">](</span><span class="sx">/path/to/dark-mode.png</span><span class="p">)</span>{: .dark }
</pre></table></code></div></div><h4 id="shadow"><span class="me-2">Shadow</span><a href="#shadow" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>The screenshots of the program window can be considered to show the shadow effect:</p><div class="language-markdown nolineno highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="p">![</span><span class="nv">Desktop View</span><span class="p">](</span><span class="sx">/assets/img/sample/mockup.png</span><span class="p">)</span>{: .shadow }
</pre></table></code></div></div><h4 id="preview-image"><span class="me-2">Preview Image</span><a href="#preview-image" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>If you want to add an image at the top of the post, please provide an image with a resolution of <code class="language-plaintext highlighter-rouge">1200 x 630</code>. Please note that if the image aspect ratio does not meet <code class="language-plaintext highlighter-rouge">1.91 : 1</code>, the image will be scaled and cropped.</p><p>Knowing these prerequisites, you can start setting the image’s attribute:</p><div class="language-yaml highlighter-rouge"><div class="code-header"> <span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
</pre><td class="rouge-code"><pre><span class="nn">---</span>
<span class="na">image</span><span class="pi">:</span>
<span class="na">path</span><span class="pi">:</span> <span class="s">/path/to/image</span>
<span class="na">alt</span><span class="pi">:</span> <span class="s">image alternative text</span>
<span class="nn">---</span>
</pre></table></code></div></div><p>Note that the <a href="#url-prefix"><code class="language-plaintext highlighter-rouge">media_subpath</code></a> can also be passed to the preview image, that is, when it has been set, the attribute <code class="language-plaintext highlighter-rouge">path</code> only needs the image file name.</p><p>For simple use, you can also just use <code class="language-plaintext highlighter-rouge">image</code> to define the path.</p><div class="language-yml highlighter-rouge"><div class="code-header"> <span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
</pre><td class="rouge-code"><pre><span class="nn">---</span>
<span class="na">image</span><span class="pi">:</span> <span class="s">/path/to/image</span>
<span class="nn">---</span>
</pre></table></code></div></div><h4 id="lqip"><span class="me-2">LQIP</span><a href="#lqip" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>For preview images:</p><div class="language-yaml highlighter-rouge"><div class="code-header"> <span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre><td class="rouge-code"><pre><span class="nn">---</span>
<span class="na">image</span><span class="pi">:</span>
<span class="na">lqip</span><span class="pi">:</span> <span class="s">/path/to/lqip-file</span> <span class="c1"># or base64 URI</span>
<span class="nn">---</span>
</pre></table></code></div></div><blockquote><p>You can observe LQIP in the preview image of post "<a href="../text-and-typography/">Text and Typography</a>".</p></blockquote><p>For normal images:</p><div class="language-markdown nolineno highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="p">![</span><span class="nv">Image description</span><span class="p">](</span><span class="sx">/path/to/image</span><span class="p">)</span>{: lqip="/path/to/lqip-file" }
</pre></table></code></div></div><h3 id="video"><span class="me-2">Video</span><a href="#video" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><h4 id="social-media-platform"><span class="me-2">Social Media Platform</span><a href="#social-media-platform" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>You can embed videos from social media platforms with the following syntax:</p><div class="language-liquid highlighter-rouge"><div class="code-header"> <span data-label-text="Liquid"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="cp">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>embed/{Platform}.html<span class="w"> </span><span class="na">id</span><span class="o">=</span><span class="s1">'{ID}'</span><span class="w"> </span><span class="cp">%}</span>
</pre></table></code></div></div><p>Where <code class="language-plaintext highlighter-rouge">Platform</code> is the lowercase of the platform name, and <code class="language-plaintext highlighter-rouge">ID</code> is the video ID.</p><p>The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.</p><div class="table-wrapper"><table><thead><tr><th>Video URL<th>Platform<th style="text-align: left">ID<tbody><tr><td><a href="https://www.youtube.com/watch?v=H-B46URT4mg">https://www.<strong>youtube</strong>.com/watch?v=<strong>H-B46URT4mg</strong></a><td><code class="language-plaintext highlighter-rouge">youtube</code><td style="text-align: left"><code class="language-plaintext highlighter-rouge">H-B46URT4mg</code><tr><td><a href="https://www.twitch.tv/videos/1634779211">https://www.<strong>twitch</strong>.tv/videos/<strong>1634779211</strong></a><td><code class="language-plaintext highlighter-rouge">twitch</code><td style="text-align: left"><code class="language-plaintext highlighter-rouge">1634779211</code><tr><td><a href="https://www.bilibili.com/video/BV1Q44y1B7Wf">https://www.<strong>bilibili</strong>.com/video/<strong>BV1Q44y1B7Wf</strong></a><td><code class="language-plaintext highlighter-rouge">bilibili</code><td style="text-align: left"><code class="language-plaintext highlighter-rouge">BV1Q44y1B7Wf</code></table></div><h4 id="video-files"><span class="me-2">Video Files</span><a href="#video-files" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>If you want to embed a video file directly, use the following syntax:</p><div class="language-liquid highlighter-rouge"><div class="code-header"> <span data-label-text="Liquid"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="cp">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>embed/video.html<span class="w"> </span><span class="na">src</span><span class="o">=</span><span class="s1">'{URL}'</span><span class="w"> </span><span class="cp">%}</span>
</pre></table></code></div></div><p>Where <code class="language-plaintext highlighter-rouge">URL</code> is a URL to a video file e.g. <code class="language-plaintext highlighter-rouge">/path/to/sample/video.mp4</code>.</p><p>You can also specify additional attributes for the embedded video file. Here is a full list of attributes allowed.</p><ul><li><code class="language-plaintext highlighter-rouge">poster='/path/to/poster.png'</code> — poster image for a video that is shown while video is downloading<li><code class="language-plaintext highlighter-rouge">title='Text'</code> — title for a video that appears below the video and looks same as for images<li><code class="language-plaintext highlighter-rouge">autoplay=true</code> — video automatically begins to play back as soon as it can<li><code class="language-plaintext highlighter-rouge">loop=true</code> — automatically seek back to the start upon reaching the end of the video<li><code class="language-plaintext highlighter-rouge">muted=true</code> — audio will be initially silenced<li><code class="language-plaintext highlighter-rouge">types</code> — specify the extensions of additional video formats separated by <code class="language-plaintext highlighter-rouge">|</code>. Ensure these files exist in the same directory as your primary video file.</ul><p>Consider an example using all of the above:</p><div class="language-liquid highlighter-rouge"><div class="code-header"> <span data-label-text="Liquid"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
</pre><td class="rouge-code"><pre><span class="cp">{%</span><span class="w">
</span><span class="nt">include</span><span class="w"> </span>embed/video.html<span class="w">
</span><span class="na">src</span><span class="o">=</span><span class="s1">'/path/to/video.mp4'</span><span class="w">
</span><span class="na">types</span><span class="o">=</span><span class="s1">'ogg|mov'</span><span class="w">
</span><span class="na">poster</span><span class="o">=</span><span class="s1">'poster.png'</span><span class="w">
</span><span class="na">title</span><span class="o">=</span><span class="s1">'Demo video'</span><span class="w">
</span><span class="na">autoplay</span><span class="o">=</span><span class="kc">true</span><span class="w">
</span><span class="na">loop</span><span class="o">=</span><span class="kc">true</span><span class="w">
</span><span class="na">muted</span><span class="o">=</span><span class="kc">true</span><span class="w">
</span><span class="cp">%}</span>
</pre></table></code></div></div><h3 id="audios"><span class="me-2">Audios</span><a href="#audios" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>If you want to embed an audio file directly, use the following syntax:</p><div class="language-liquid highlighter-rouge"><div class="code-header"> <span data-label-text="Liquid"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="cp">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>embed/audio.html<span class="w"> </span><span class="na">src</span><span class="o">=</span><span class="s1">'{URL}'</span><span class="w"> </span><span class="cp">%}</span>
</pre></table></code></div></div><p>Where <code class="language-plaintext highlighter-rouge">URL</code> is a URL to an audio file e.g. <code class="language-plaintext highlighter-rouge">/path/to/audio.mp3</code>.</p><p>You can also specify additional attributes for the embedded audio file. Here is a full list of attributes allowed.</p><ul><li><code class="language-plaintext highlighter-rouge">title='Text'</code> — title for an audio that appears below the audio and looks same as for images<li><code class="language-plaintext highlighter-rouge">types</code> — specify the extensions of additional audio formats separated by <code class="language-plaintext highlighter-rouge">|</code>. Ensure these files exist in the same directory as your primary audio file.</ul><p>Consider an example using all of the above:</p><div class="language-liquid highlighter-rouge"><div class="code-header"> <span data-label-text="Liquid"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
</pre><td class="rouge-code"><pre><span class="cp">{%</span><span class="w">
</span><span class="nt">include</span><span class="w"> </span>embed/audio.html<span class="w">
</span><span class="na">src</span><span class="o">=</span><span class="s1">'/path/to/audio.mp3'</span><span class="w">
</span><span class="na">types</span><span class="o">=</span><span class="s1">'ogg|wav|aac'</span><span class="w">
</span><span class="na">title</span><span class="o">=</span><span class="s1">'Demo audio'</span><span class="w">
</span><span class="cp">%}</span>
</pre></table></code></div></div><h2 id="pinned-posts"><span class="me-2">Pinned Posts</span><a href="#pinned-posts" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:</p><div class="language-yaml highlighter-rouge"><div class="code-header"> <span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
</pre><td class="rouge-code"><pre><span class="nn">---</span>
<span class="na">pin</span><span class="pi">:</span> <span class="kc">true</span>
<span class="nn">---</span>
</pre></table></code></div></div><h2 id="prompts"><span class="me-2">Prompts</span><a href="#prompts" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>There are several types of prompts: <code class="language-plaintext highlighter-rouge">tip</code>, <code class="language-plaintext highlighter-rouge">info</code>, <code class="language-plaintext highlighter-rouge">warning</code>, and <code class="language-plaintext highlighter-rouge">danger</code>. They can be generated by adding the class <code class="language-plaintext highlighter-rouge">prompt-{type}</code> to the blockquote. For example, define a prompt of type <code class="language-plaintext highlighter-rouge">info</code> as follows:</p><div class="language-md nolineno highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
</pre><td class="rouge-code"><pre><span class="gt">&gt; Example line for prompt.</span>
{: .prompt-info }
</pre></table></code></div></div><h2 id="syntax"><span class="me-2">Syntax</span><a href="#syntax" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id="inline-code"><span class="me-2">Inline Code</span><a href="#inline-code" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class="language-md nolineno highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="sb">`inline code part`</span>
</pre></table></code></div></div><h3 id="filepath-highlight"><span class="me-2">Filepath Highlight</span><a href="#filepath-highlight" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class="language-md nolineno highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="sb">`/path/to/a/file.extend`</span>{: .filepath}
</pre></table></code></div></div><h3 id="code-block"><span class="me-2">Code Block</span><a href="#code-block" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Markdown symbols <code class="language-plaintext highlighter-rouge">```</code> can easily create a code block as follows:</p><div class="language-md highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
</pre><td class="rouge-code"><pre><span class="p">```</span><span class="nl">
</span>This is a plaintext code snippet.
<span class="p">```</span>
</pre></table></code></div></div><h4 id="specifying-language"><span class="me-2">Specifying Language</span><a href="#specifying-language" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>Using <code class="language-plaintext highlighter-rouge">```{language}</code> you will get a code block with syntax highlight:</p><div class="language-markdown highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
</pre><td class="rouge-code"><pre><span class="p">```</span><span class="nl">yaml
</span><span class="na">key</span><span class="pi">:</span> <span class="s">value</span>
<span class="p">```</span>
</pre></table></code></div></div><blockquote class="prompt-danger"><p>The Jekyll tag <code class="language-plaintext highlighter-rouge">{% highlight %}</code> is not compatible with this theme.</p></blockquote><h4 id="line-number"><span class="me-2">Line Number</span><a href="#line-number" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>By default, all languages except <code class="language-plaintext highlighter-rouge">plaintext</code>, <code class="language-plaintext highlighter-rouge">console</code>, and <code class="language-plaintext highlighter-rouge">terminal</code> will display line numbers. When you want to hide the line number of a code block, add the class <code class="language-plaintext highlighter-rouge">nolineno</code> to it:</p><div class="language-markdown highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre><td class="rouge-code"><pre><span class="p">```</span><span class="nl">shell
</span><span class="nb">echo</span> <span class="s1">'No more line numbers!'</span>
<span class="p">```</span>
{: .nolineno }
</pre></table></code></div></div><h4 id="specifying-the-filename"><span class="me-2">Specifying the Filename</span><a href="#specifying-the-filename" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>You may have noticed that the code language will be displayed at the top of the code block. If you want to replace it with the file name, you can add the attribute <code class="language-plaintext highlighter-rouge">file</code> to achieve this:</p><div class="language-markdown highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre><td class="rouge-code"><pre><span class="p">```</span><span class="nl">shell
</span><span class="c"># content</span>
<span class="p">```</span>
{: file="path/to/file" }
</pre></table></code></div></div><h4 id="liquid-codes"><span class="me-2">Liquid Codes</span><a href="#liquid-codes" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4><p>If you want to display the <strong>Liquid</strong> snippet, surround the liquid code with <code class="language-plaintext highlighter-rouge">{% raw %}</code> and <code class="language-plaintext highlighter-rouge">{% endraw %}</code>:</p><div class="language-markdown highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
</pre><td class="rouge-code"><pre>{% raw %}
<span class="p">```</span><span class="nl">liquid
</span><span class="cp">{%</span><span class="w"> </span><span class="nt">if</span><span class="w"> </span><span class="nv">product</span><span class="p">.</span><span class="nv">title</span><span class="w"> </span><span class="ow">contains</span><span class="w"> </span><span class="s1">'Pack'</span><span class="w"> </span><span class="cp">%}</span>
This product's title contains the word Pack.
<span class="cp">{%</span><span class="w"> </span><span class="nt">endif</span><span class="w"> </span><span class="cp">%}</span>
<span class="p">```</span>
{% endraw %}
</pre></table></code></div></div><p>Or adding <code class="language-plaintext highlighter-rouge">render_with_liquid: false</code> (Requires Jekyll 4.0 or higher) to the post’s YAML block.</p><h2 id="mathematics"><span class="me-2">Mathematics</span><a href="#mathematics" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>We use <a href="https://www.mathjax.org/"><strong>MathJax</strong></a> to generate mathematics. For website performance reasons, the mathematical feature won’t be loaded by default. But it can be enabled by:</p><div class="language-yaml highlighter-rouge"><div class="code-header"> <span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
</pre><td class="rouge-code"><pre><span class="nn">---</span>
<span class="na">math</span><span class="pi">:</span> <span class="kc">true</span>
<span class="nn">---</span>
</pre></table></code></div></div><p>After enabling the mathematical feature, you can add math equations with the following syntax:</p><ul><li><strong>Block math</strong> should be added with <code class="language-plaintext highlighter-rouge">$$ math $$</code> with <strong>mandatory</strong> blank lines before and after <code class="language-plaintext highlighter-rouge">$$</code><ul><li><strong>Inserting equation numbering</strong> should be added with <code class="language-plaintext highlighter-rouge">$$\begin{equation} math \end{equation}$$</code><li><strong>Referencing equation numbering</strong> should be done with <code class="language-plaintext highlighter-rouge">\label{eq:label_name}</code> in the equation block and <code class="language-plaintext highlighter-rouge">\eqref{eq:label_name}</code> inline with text (see example below)</ul><li><strong>Inline math</strong> (in lines) should be added with <code class="language-plaintext highlighter-rouge">$$ math $$</code> without any blank line before or after <code class="language-plaintext highlighter-rouge">$$</code><li><strong>Inline math</strong> (in lists) should be added with <code class="language-plaintext highlighter-rouge">\$$ math $$</code></ul><div class="language-markdown highlighter-rouge"><div class="code-header"> <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
</pre><td class="rouge-code"><pre><span class="c">&lt;!-- Block math, keep all blank lines --&gt;</span>
$$
LaTeX_math_expression
$$
<span class="c">&lt;!-- Equation numbering, keep all blank lines --&gt;</span>
$$
<span class="se">\b</span>egin{equation}
LaTeX_math_expression
<span class="se">\l</span>abel{eq:label_name}
<span class="se">\e</span>nd{equation}
$$
Can be referenced as <span class="se">\e</span>qref{eq:label_name}.
<span class="c">&lt;!-- Inline math in lines, NO blank lines --&gt;</span>
"Lorem ipsum dolor sit amet, $$ LaTeX_math_expression $$ consectetur adipiscing elit."
<span class="c">&lt;!-- Inline math in lists, escape the first `$` --&gt;</span>
<span class="p">
1.</span> <span class="se">\$</span>$ LaTeX_math_expression $$
<span class="p">2.</span> <span class="se">\$</span>$ LaTeX_math_expression $$
<span class="p">3.</span> <span class="se">\$</span>$ LaTeX_math_expression $$
</pre></table></code></div></div><blockquote class="prompt-tip"><p>Starting with <code class="language-plaintext highlighter-rouge">v7.0.0</code>, configuration options for <strong>MathJax</strong> have been moved to file <code class="language-plaintext filepath highlighter-rouge">assets/js/data/mathjax.js</code>, and you can change the options as needed, such as adding <a href="https://docs.mathjax.org/en/latest/input/tex/extensions/index.html">extensions</a>.<br /> If you are building the site via <code class="language-plaintext highlighter-rouge">chirpy-starter</code>, copy that file from the gem installation directory (check with command <code class="language-plaintext highlighter-rouge">bundle info --path jekyll-theme-chirpy</code>) to the same directory in your repository.</p></blockquote><h2 id="mermaid"><span class="me-2">Mermaid</span><a href="#mermaid" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p><a href="https://github.com/mermaid-js/mermaid"><strong>Mermaid</strong></a> is a great diagram generation tool. To enable it on your post, add the following to the YAML block:</p><div class="language-yaml highlighter-rouge"><div class="code-header"> <span data-label-text="YAML"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
</pre><td class="rouge-code"><pre><span class="nn">---</span>
<span class="na">mermaid</span><span class="pi">:</span> <span class="kc">true</span>
<span class="nn">---</span>
</pre></table></code></div></div><p>Then you can use it like other markdown languages: surround the graph code with <code class="language-plaintext highlighter-rouge">```mermaid</code> and <code class="language-plaintext highlighter-rouge">```</code>.</p><h2 id="learn-more"><span class="me-2">Learn More</span><a href="#learn-more" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>For more knowledge about Jekyll posts, visit the <a href="https://jekyllrb.com/docs/posts/">Jekyll Docs: Posts</a>.</p></div><div class="post-tail-wrapper text-muted"><div class="post-meta mb-3"> <i class="far fa-folder-open fa-fw me-1"></i> <a href="//categories/blogging/">Blogging</a>, <a href="//categories/tutorial/">Tutorial</a></div><div class="post-tags"> <i class="fa fa-tags fa-fw me-1"></i> <a href="//tags/writing/" class="post-tag no-text-decoration" >writing</a></div><div class=" post-tail-bottom d-flex justify-content-between align-items-center mt-5 pb-2 " ><div class="license-wrapper"> This post is licensed under <a href="https://creativecommons.org/licenses/by/4.0/"> CC BY 4.0 </a> by the author.</div><div class="share-wrapper d-flex align-items-center"> <span class="share-label text-muted">Share</span> <span class="share-icons"> <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fasandikci.com%2Fposts%2Fwrite-a-new-post%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Linkedin" aria-label="Linkedin"> <i class="fa-fw fab fa-linkedin"></i> </a> <script defer type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon/+esm"></script> <button class="btn text-start" data-bs-toggle="tooltip" data-bs-placement="top" title="Mastodon" aria-label="Mastodon"> <share-to-mastodon class="share-mastodon" message="Writing%20a%20New%20Post%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1" url="https%3A%2F%2Fasandikci.com%2Fposts%2Fwrite-a-new-post%2F"customInstanceList="[{&quot;label&quot;:&quot;mastodon.social&quot;,&quot;link&quot;:&quot;https://mastodon.social/&quot;},{&quot;label&quot;:&quot;mastodon.online&quot;,&quot;link&quot;:&quot;https://mastodon.online/&quot;},{&quot;label&quot;:&quot;fosstodon.org&quot;,&quot;link&quot;:&quot;https://fosstodon.org/&quot;},{&quot;label&quot;:&quot;mastodon.com.tr&quot;,&quot;link&quot;:&quot;https://mastodon.com.tr/&quot;}]" > <i class="fa-fw fa fa-mastodon"></i> </share-to-mastodon> </button> <a href="https://twitter.com/intent/tweet?text=Writing%20a%20New%20Post%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1&url=https%3A%2F%2Fasandikci.com%2Fposts%2Fwrite-a-new-post%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Twitter" aria-label="Twitter"> <i class="fa-fw fa-brands fa-square-x-twitter"></i> </a> <a href="https://www.facebook.com/sharer/sharer.php?title=Writing%20a%20New%20Post%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1&u=https%3A%2F%2Fasandikci.com%2Fposts%2Fwrite-a-new-post%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Facebook" aria-label="Facebook"> <i class="fa-fw fab fa-facebook-square"></i> </a> <a href="https://t.me/share/url?url=https%3A%2F%2Fasandikci.com%2Fposts%2Fwrite-a-new-post%2F&text=Writing%20a%20New%20Post%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Telegram" aria-label="Telegram"> <i class="fa-fw fab fa-telegram"></i> </a> <a href="https://bsky.app/intent/compose?text=Writing%20a%20New%20Post%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1%20https%3A%2F%2Fasandikci.com%2Fposts%2Fwrite-a-new-post%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Bluesky" aria-label="Bluesky"> <i class="fa-fw fa-brands fa-bluesky"></i> </a> <a href="https://www.reddit.com/submit?url=https%3A%2F%2Fasandikci.com%2Fposts%2Fwrite-a-new-post%2F&title=Writing%20a%20New%20Post%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Reddit" aria-label
Reference in a new issue Copy permalink