mmckinnon/chirpy-starter
1
0
Fork 0
mirror of https://github.com/cotes2020/chirpy-starter.git synced 2025-04-19 19:03:27 +10:00
Code Issues Actions Packages Projects Releases Wiki Activity
chirpy-starter/_site/posts/text-and-typography/index.html
ericlikedis 6409892add changes
2023-08-26 22:38:57 -05:00

3685 lines
57 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<!-- `site.alt_lang` can specify a language different from the UI -->
<html lang="en"
>
<!-- The Head -->
<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="apple-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"
>
<!-- it's a local file path -->
<!-- Begin Jekyll SEO tag v2.8.0 -->
<meta name="generator" content="Jekyll v4.3.2" />
<meta property="og:title" content="Text and Typography" />
<meta name="author" content="Eric Reymundo" />
<meta property="og:locale" content="en" />
<meta name="description" content="This post is to show Markdown syntax rendering on Chirpy, you can also use it as an example of writing. Now, let’s start looking at text and typography." />
<meta property="og:description" content="This post is to show Markdown syntax rendering on Chirpy, you can also use it as an example of writing. Now, let’s start looking at text and typography." />
<link rel="canonical" href="http://localhost:4000/posts/text-and-typography/" />
<meta property="og:url" content="http://localhost:4000/posts/text-and-typography/" />
<meta property="og:site_name" content="neo’s brain" />
<meta property="og:image" content="http://localhost:4000/assets/images/devices-mockup.png" />
<meta property="og:image:alt" content="Responsive rendering of Chirpy theme on multiple devices." />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-08-07T22:33:00-05:00" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="http://localhost:4000/assets/images/devices-mockup.png" />
<meta name="twitter:image:alt" content="Responsive rendering of Chirpy theme on multiple devices." />
<meta property="twitter:title" content="Text and Typography" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Eric Reymundo"},"dateModified":"2023-08-23T16:34:20-05:00","datePublished":"2019-08-07T22:33:00-05:00","description":"This post is to show Markdown syntax rendering on Chirpy, you can also use it as an example of writing. Now, let’s start looking at text and typography.","headline":"Text and Typography","image":{"alt":"Responsive rendering of Chirpy theme on multiple devices.","url":"http://localhost:4000/assets/images/devices-mockup.png","@type":"imageObject"},"mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/text-and-typography/"},"url":"http://localhost:4000/posts/text-and-typography/"}</script>
<!-- End Jekyll SEO tag -->
<title>Text and Typography | neo's brain
</title>
<!--
The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
Generated by: https://realfavicongenerator.net/
-->
<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="neo's brain">
<meta name="application-name" content="neo's brain">
<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" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com" >
<link rel="dns-prefetch" href="https://fonts.googleapis.com" >
<link rel="preconnect" href="https://cdn.jsdelivr.net" >
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" >
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap">
<!-- GA -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.css">
<!-- Manific Popup -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css">
<!-- JavaScript -->
<!-- Switch the mode between dark and light. -->
<script type="text/javascript">
class ModeToggle {
static get MODE_KEY() {
return 'mode';
}
static get MODE_ATTR() {
return 'data-mode';
}
static get DARK_MODE() {
return 'dark';
}
static get LIGHT_MODE() {
return 'light';
}
static get ID() {
return 'mode-toggle';
}
constructor() {
if (this.hasMode) {
if (this.isDarkMode) {
if (!this.isSysDarkPrefer) {
this.setDark();
}
} else {
if (this.isSysDarkPrefer) {
this.setLight();
}
}
}
let self = this;
/* always follow the system prefers */
this.sysDarkPrefers.addEventListener('change', () => {
if (self.hasMode) {
if (self.isDarkMode) {
if (!self.isSysDarkPrefer) {
self.setDark();
}
} else {
if (self.isSysDarkPrefer) {
self.setLight();
}
}
self.clearMode();
}
self.notify();
});
} /* constructor() */
get sysDarkPrefers() {
return window.matchMedia('(prefers-color-scheme: dark)');
}
get isSysDarkPrefer() {
return this.sysDarkPrefers.matches;
}
get isDarkMode() {
return this.mode === ModeToggle.DARK_MODE;
}
get isLightMode() {
return this.mode === ModeToggle.LIGHT_MODE;
}
get hasMode() {
return this.mode != null;
}
get mode() {
return sessionStorage.getItem(ModeToggle.MODE_KEY);
}
/* get the current mode on screen */
get modeStatus() {
if (this.isDarkMode || (!this.hasMode && this.isSysDarkPrefer)) {
return ModeToggle.DARK_MODE;
} else {
return ModeToggle.LIGHT_MODE;
}
}
setDark() {
document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
}
setLight() {
document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
}
clearMode() {
document.documentElement.removeAttribute(ModeToggle.MODE_ATTR);
sessionStorage.removeItem(ModeToggle.MODE_KEY);
}
/* Notify another plugins that the theme mode has changed */
notify() {
window.postMessage(
{
direction: ModeToggle.ID,
message: this.modeStatus
},
'*'
);
}
flipMode() {
if (this.hasMode) {
if (this.isSysDarkPrefer) {
if (this.isLightMode) {
this.clearMode();
} else {
this.setLight();
}
} else {
if (this.isDarkMode) {
this.clearMode();
} else {
this.setDark();
}
}
} else {
if (this.isSysDarkPrefer) {
this.setLight();
} else {
this.setDark();
}
}
this.notify();
} /* flipMode() */
} /* ModeToggle */
const modeToggle = new ModeToggle();
</script>
<!-- A placeholder to allow defining custom metadata -->
</head>
<body>
<!-- The Side Bar -->
<div id="sidebar" class="d-flex flex-column align-items-end">
<div class="profile-wrapper">
<a href="/" id="avatar" class="rounded-circle">
</a>
<div class="site-title">
<a href="/">neo's brain</a>
</div>
<div class="site-subtitle fst-italic">just a bunch of technical write ups and notes.</div>
</div>
<!-- .profile-wrapper -->
<ul class="nav flex-column flex-grow-1 w-100 ps-0">
<!-- home -->
<li class="nav-item">
<a href="/" class="nav-link">
<i class="fa-fw fas fa-home"></i>
<span>HOME</span>
</a>
</li>
<!-- the real tabs -->
<li class="nav-item">
<a href="/categories/" class="nav-link">
<i class="fa-fw fas fa-stream"></i>
<span>CATEGORIES</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/tags/" class="nav-link">
<i class="fa-fw fas fa-tags"></i>
<span>TAGS</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/archives/" class="nav-link">
<i class="fa-fw fas fa-archive"></i>
<span>ARCHIVES</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/about/" class="nav-link">
<i class="fa-fw fas fa-info-circle"></i>
<span>ABOUT</span>
</a>
</li>
<!-- .nav-item -->
</ul>
<!-- ul.nav.flex-column -->
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
<button class="mode-toggle btn" aria-label="Switch Mode">
<i class="fas fa-adjust"></i>
</button>
<span class="icon-border"></span>
<a
href="https://github.com/ericlikedis"
aria-label="github"
target="_blank"
rel="noopener noreferrer"
>
<i class="fab fa-github"></i>
</a>
<a
href="https://twitter.com/"
aria-label="twitter"
target="_blank"
rel="noopener noreferrer"
>
<i class="fab fa-twitter"></i>
</a>
<a
href="javascript:location.href = 'mailto:' + ['ereymundo2013','gmail.com'].join('@')"
aria-label="email"
>
<i class="fas fa-envelope"></i>
</a>
<a
href="/feed.xml"
aria-label="rss"
>
<i class="fas fa-rss"></i>
</a>
</div>
<!-- .sidebar-bottom -->
</div>
<!-- #sidebar -->
<div id="main-wrapper" class="d-flex justify-content-center">
<div id="main" class="container px-xxl-5">
<!-- The Top Bar -->
<div id="topbar-wrapper">
<div
id="topbar"
class="container d-flex align-items-center justify-content-between h-100"
>
<span id="breadcrumb">
<span>
<a href="/">
Home
</a>
</span>
<span>Text and Typography</span>
</span>
<!-- endof #breadcrumb -->
<i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
<div id="topbar-title">
Post
</div>
<i id="search-trigger" class="fas fa-search fa-fw"></i>
<span id="search-wrapper" class="align-items-center">
<i class="fas fa-search fa-fw"></i>
<input
class="form-control"
id="search-input"
type="search"
aria-label="search"
autocomplete="off"
placeholder="Search..."
>
</span>
<span id="search-cancel">Cancel</span>
</div>
</div>
<div class="row">
<!-- core -->
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pe-xl-4">
<div class="post px-1 px-md-2">
<!-- Refactor the HTML structure -->
<!--
In order to allow a wide table to scroll horizontally,
we suround the markdown table with `<div class="table-wrapper">` and `</div>`
-->
<!--
Fixed kramdown code highlight rendering:
https://github.com/penibelst/jekyll-compress-html/issues/101
https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
-->
<!-- Change the icon of checkbox -->
<!-- images -->
<!-- CDN URL -->
<!-- Add image path -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- add SVG placehoder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- create the image wrapper -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- add SVG placehoder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- create the image wrapper -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- add SVG placehoder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- create the image wrapper -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- add SVG placehoder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- create the image wrapper -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- add SVG placehoder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- create the image wrapper -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- add SVG placehoder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- create the image wrapper -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
<!-- add image placeholder -->
<!-- add SVG placehoder -->
<!-- Bypass the HTML-proofer test -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- create the image wrapper -->
<!-- combine -->
<!-- Add header for code snippets -->
<!-- Create heading anchors -->
<!-- return -->
<h1 data-toc-skip>Text and Typography</h1>
<div class="post-meta text-muted">
<!-- published date -->
<span>
Posted
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class=""
data-ts="1565235180"
data-df="ll"
data-bs-toggle="tooltip" data-bs-placement="bottom"
>
Aug 7, 2019
</em>
</span>
<!-- lastmod date -->
<span>
Updated
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class=""
data-ts="1692826460"
data-df="ll"
data-bs-toggle="tooltip" data-bs-placement="bottom"
>
Aug 23, 2023
</em>
</span>
<div class="mt-3 mb-3">
<a href="/assets/images/devices-mockup.png" class="popup img-link preview-img shimmer"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 630'%3E%3C/svg%3E" data-src="/assets/images/devices-mockup.png" alt="Responsive rendering of Chirpy theme on multiple devices." width="1200" height="630" class="lazyload" data-proofer-ignore></a><figcaption class="text-center pt-2 pb-2">Responsive rendering of Chirpy theme on multiple devices.</figcaption></div>
<div class="d-flex justify-content-between">
<!-- author(s) -->
<span>
By
<em>
<a href=""></a>
</em>
</span>
<div>
<!-- read time -->
<!-- Calculate the post's reading time, and display the word count in tooltip -->
<!-- words per minute -->
<!-- return element -->
<span
class="readtime"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="610 words"
>
<em>3 min</em> read</span>
</div>
</div> <!-- .d-flex -->
</div> <!-- .post-meta -->
<div class="post-content">
<p>This post is to show Markdown syntax rendering on <a href="https://github.com/cotes2020/jekyll-theme-chirpy/fork"><strong>Chirpy</strong></a>, you can also use it as an example of writing. Now, let’s start looking at text and typography.</p>
<h2 id="headings"><span class="me-2">Headings</span><a href="#headings" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<h1 class="mt-5">H1 - heading</h1>
<h2 data-toc-skip="">H2 - heading</h2>
<h3 data-toc-skip="">H3 - heading</h3>
<h4>H4 - heading</h4>
<h2 id="paragraph"><span class="me-2">Paragraph</span><a href="#paragraph" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.</p>
<h2 id="lists"><span class="me-2">Lists</span><a href="#lists" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<h3 id="ordered-list"><span class="me-2">Ordered list</span><a href="#ordered-list" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<ol>
<li>Firstly</li>
<li>Secondly</li>
<li>Thirdly</li>
</ol>
<h3 id="unordered-list"><span class="me-2">Unordered list</span><a href="#unordered-list" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<ul>
<li>Chapter
<ul>
<li>Section
<ul>
<li>Paragraph</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="todo-list"><span class="me-2">ToDo list</span><a href="#todo-list" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<ul class="task-list">
<li class="task-list-item"><i class="far fa-circle fa-fw"></i>Job
<ul class="task-list">
<li class="task-list-item"><i class="fas fa-check-circle fa-fw checked"></i>Step 1</li>
<li class="task-list-item"><i class="fas fa-check-circle fa-fw checked"></i>Step 2</li>
<li class="task-list-item"><i class="far fa-circle fa-fw"></i>Step 3</li>
</ul>
</li>
</ul>
<h3 id="description-list"><span class="me-2">Description list</span><a href="#description-list" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<dl>
<dt>Sun</dt>
<dd>the star around which the earth orbits</dd>
<dt>Moon</dt>
<dd>the natural satellite of the earth, visible by reflected light from the sun</dd>
</dl>
<h2 id="block-quote"><span class="me-2">Block Quote</span><a href="#block-quote" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<blockquote>
<p>This line shows the <em>block quote</em>.</p>
</blockquote>
<h2 id="prompts"><span class="me-2">Prompts</span><a href="#prompts" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<blockquote class="prompt-tip">
<p>An example showing the <code class="language-plaintext highlighter-rouge">tip</code> type prompt.</p>
</blockquote>
<blockquote class="prompt-info">
<p>An example showing the <code class="language-plaintext highlighter-rouge">info</code> type prompt.</p>
</blockquote>
<blockquote class="prompt-warning">
<p>An example showing the <code class="language-plaintext highlighter-rouge">warning</code> type prompt.</p>
</blockquote>
<blockquote class="prompt-danger">
<p>An example showing the <code class="language-plaintext highlighter-rouge">danger</code> type prompt.</p>
</blockquote>
<h2 id="tables"><span class="me-2">Tables</span><a href="#tables" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<div class="table-wrapper"><table>
<thead>
<tr>
<th style="text-align: left">Company</th>
<th style="text-align: left">Contact</th>
<th style="text-align: right">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">Alfreds Futterkiste</td>
<td style="text-align: left">Maria Anders</td>
<td style="text-align: right">Germany</td>
</tr>
<tr>
<td style="text-align: left">Island Trading</td>
<td style="text-align: left">Helen Bennett</td>
<td style="text-align: right">UK</td>
</tr>
<tr>
<td style="text-align: left">Magazzini Alimentari Riuniti</td>
<td style="text-align: left">Giovanni Rovelli</td>
<td style="text-align: right">Italy</td>
</tr>
</tbody>
</table></div>
<h2 id="links"><span class="me-2">Links</span><a href="#links" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p><a href="http://127.0.0.1:4000">http://127.0.0.1:4000</a></p>
<h2 id="footnote"><span class="me-2">Footnote</span><a href="#footnote" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Click the hook will locate the footnote<sup id="fnref:footnote" role="doc-noteref"><a href="#fn:footnote" class="footnote" rel="footnote">1</a></sup>, and here is another footnote<sup id="fnref:fn-nth-2" role="doc-noteref"><a href="#fn:fn-nth-2" class="footnote" rel="footnote">2</a></sup>.</p>
<h2 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></h2>
<p>This is an example of <code class="language-plaintext highlighter-rouge">Inline Code</code>.</p>
<h2 id="filepath"><span class="me-2">Filepath</span><a href="#filepath" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Here is the <code class="language-plaintext filepath highlighter-rouge">/path/to/the/file.extend</code>.</p>
<h2 id="code-blocks"><span class="me-2">Code blocks</span><a href="#code-blocks" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<h3 id="common"><span class="me-2">Common</span><a href="#common" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<div class="language-plaintext highlighter-rouge"><div class="code-header">
<span data-label-text="Plaintext"><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><td class="rouge-code"><pre>This is a common code snippet, without syntax highlight and line number.
</pre></td></tr></tbody></table></code></div></div>
<h3 id="specific-language"><span class="me-2">Specific Language</span><a href="#specific-language" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<div class="language-bash highlighter-rouge"><div class="code-header">
<span data-label-text="Shell"><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><td class="rouge-code"><pre><span class="k">if</span> <span class="o">[</span> <span class="nv">$?</span> <span class="nt">-ne</span> 0 <span class="o">]</span><span class="p">;</span> <span class="k">then
</span><span class="nb">echo</span> <span class="s2">"The command was not successful."</span><span class="p">;</span>
<span class="c">#do the needful / exit</span>
<span class="k">fi</span><span class="p">;</span>
</pre></td></tr></tbody></table></code></div></div>
<h3 id="specific-filename"><span class="me-2">Specific filename</span><a href="#specific-filename" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<div file="_sass/jekyll-theme-chirpy.scss" class="language-sass highlighter-rouge"><div class="code-header">
<span data-label-text="_sass/jekyll-theme-chirpy.scss"><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
</pre></td><td class="rouge-code"><pre><span class="k">@import</span>
<span class="s2">"colors/light-typography"</span><span class="o">,</span>
<span class="s2">"colors/dark-typography"</span><span class="o">;</span>
</pre></td></tr></tbody></table></code></div></div>
<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>The mathematics powered by <a href="https://www.mathjax.org/"><strong>MathJax</strong></a>:</p>
\[\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}\]
<p>When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are</p>
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]
<h2 id="mermaid-svg"><span class="me-2">Mermaid SVG</span><a href="#mermaid-svg" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<pre><code class="language-mermaid"> gantt
title Adding GANTT diagram functionality to mermaid
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
</code></pre>
<h2 id="images"><span class="me-2">Images</span><a href="#images" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<h3 id="default-with-caption"><span class="me-2">Default (with caption)</span><a href="#default-with-caption" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p><a href="/assets/images/20230823-1.png" class="popup img-link shimmer"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 972 589'%3E%3C/svg%3E" data-src="/assets/images/20230823-1.png" alt="Desktop View" width="972" height="589" class="lazyload" data-proofer-ignore></a>
<em>Full screen width and center alignment</em></p>
<h3 id="left-aligned"><span class="me-2">Left aligned</span><a href="#left-aligned" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p><a href="/assets/images/20230823-2.png" class="popup img-link w-75 normal shimmer"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 972 589'%3E%3C/svg%3E" data-src="/assets/images/20230823-2.png" alt="Desktop View" width="972" height="589" class="lazyload" data-proofer-ignore></a></p>
<h3 id="float-to-left"><span class="me-2">Float to left</span><a href="#float-to-left" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p><a href="/assets/images/20230823-3.png" class="popup img-link w-50 left shimmer"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 972 589'%3E%3C/svg%3E" data-src="/assets/images/20230823-3.png" alt="Desktop View" width="972" height="589" class="lazyload" data-proofer-ignore></a>
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.</p>
<h3 id="float-to-right"><span class="me-2">Float to right</span><a href="#float-to-right" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p><a href="/assets/images/20230823-4.png" class="popup img-link w-50 right shimmer"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 972 589'%3E%3C/svg%3E" data-src="/assets/images/20230823-4.png" alt="Desktop View" width="972" height="589" class="lazyload" data-proofer-ignore></a>
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.</p>
<h3 id="darklight-mode--shadow"><span class="me-2">Dark/Light mode &amp; Shadow</span><a href="#darklight-mode--shadow" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>The image below will toggle dark/light mode based on theme preference, notice it has shadows.</p>
<p><a href="/assets/images/devtools-light.png" class="popup img-link light w-75 shadow rounded-10 shimmer"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1212 668'%3E%3C/svg%3E" data-src="/assets/images/devtools-light.png" alt="light mode only" width="1212" height="668" class="lazyload" data-proofer-ignore></a>
<a href="/assets/images/devtools-dark.png" class="popup img-link dark w-75 shadow rounded-10 shimmer"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1212 668'%3E%3C/svg%3E" data-src="/assets/images/devtools-dark.png" alt="dark mode only" width="1212" height="668" class="lazyload" data-proofer-ignore></a></p>
<h2 id="video"><span class="me-2">Video</span><a href="#video" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<iframe class="embed-video youtube lazyload" src="https://www.youtube.com/embed/Balreaj8Yqs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<h2 id="reverse-footnote"><span class="me-2">Reverse Footnote</span><a href="#reverse-footnote" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<div class="footnotes" role="doc-endnotes">
<ol>
<li id="fn:footnote" role="doc-endnote">
<p>The footnote source <a href="#fnref:footnote" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
</li>
<li id="fn:fn-nth-2" role="doc-endnote">
<p>The 2nd footnote source <a href="#fnref:fn-nth-2" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
</li>
</ol>
</div>
</div>
<div class="post-tail-wrapper text-muted">
<!-- categories -->
<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/demo/'>Demo</a>
</div>
<!-- tags -->
<div class="post-tags">
<i class="fa fa-tags fa-fw me-1"></i>
<a href="/tags/typography/"
class="post-tag no-text-decoration" >typography</a>
</div>
<div class="post-tail-bottom
d-flex justify-content-between align-items-center mt-3 pt-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>
<!-- Post sharing snippet -->
<div class="share-wrapper">
<span class="share-label text-muted me-1">Share</span>
<span class="share-icons">
<a
href="https://twitter.com/intent/tweet?text=Text%20and%20Typography%20-%20neo's%20brain&url=http%3A%2F%2Flocalhost%3A4000%2Fposts%2Ftext-and-typography%2F"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Twitter"
target="_blank"
rel="noopener"
aria-label="Twitter"
>
<i class="fa-fw fab fa-twitter"></i>
</a>
<a
href="https://www.facebook.com/sharer/sharer.php?title=Text%20and%20Typography%20-%20neo's%20brain&u=http%3A%2F%2Flocalhost%3A4000%2Fposts%2Ftext-and-typography%2F"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Facebook"
target="_blank"
rel="noopener"
aria-label="Facebook"
>
<i class="fa-fw fab fa-facebook-square"></i>
</a>
<a
href="https://t.me/share/url?url=http%3A%2F%2Flocalhost%3A4000%2Fposts%2Ftext-and-typography%2F&text=Text%20and%20Typography%20-%20neo's%20brain"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Telegram"
target="_blank"
rel="noopener"
aria-label="Telegram"
>
<i class="fa-fw fab fa-telegram"></i>
</a>
<i
id="copy-link"
class="fa-fw fas fa-link small"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Copy link"
data-title-succeed="Link copied successfully!"
>
</i>
</span>
</div>
</div><!-- .post-tail-bottom -->
</div><!-- div.post-tail-wrapper -->
</div>
</div>
<!-- #core-wrapper -->
<!-- panel -->
<div id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
<div class="access">
<!-- Get the last 5 posts from lastmod list. -->
<div id="access-lastmod" class="post">
<div class="panel-heading">Recently Updated</div>
<ul class="post-content list-unstyled ps-0 pb-1 ms-1 mt-2">
<li class="text-truncate lh-lg">
<a href="/posts/Mac-M1-Run-Diablo-4/">Mac M1 Run Diablo 4 - Links</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/text-and-typography/">Text and Typography</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/Flaws.cloud-AWS/">Flaws.cloud walkthrough</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/M1-Mac-How-to-switch-the-Terminal-between-x86_64-and-arm64/">M1 Mac - How to Switch the Terminal between x86_64 and arm64</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/Admonitions-Documentation/">Admonitions Documentation</a>
</li>
</ul>
</div>
<!-- #access-lastmod -->
<!-- The trending tags list -->
<div id="access-tags">
<div class="panel-heading">Trending Tags</div>
<div class="d-flex flex-wrap mt-3 mb-1 me-3">
<a class="post-tag btn btn-outline-primary" href="/tags/cybersecurity/">cybersecurity</a>
<a class="post-tag btn btn-outline-primary" href="/tags/diablo-4/">diablo 4</a>
<a class="post-tag btn btn-outline-primary" href="/tags/docs/">docs</a>
<a class="post-tag btn btn-outline-primary" href="/tags/terminal/">terminal</a>
<a class="post-tag btn btn-outline-primary" href="/tags/diablo/">diablo</a>
<a class="post-tag btn btn-outline-primary" href="/tags/m1/">M1</a>
<a class="post-tag btn btn-outline-primary" href="/tags/apple-silicon/">apple silicon</a>
<a class="post-tag btn btn-outline-primary" href="/tags/cheatsheets/">cheatsheets</a>
<a class="post-tag btn btn-outline-primary" href="/tags/cloud/">cloud</a>
<a class="post-tag btn btn-outline-primary" href="/tags/gcih/">GCIH</a>
</div>
</div>
</div>
<div id="toc-wrapper" class="ps-0 pe-4 mb-5">
<div class="panel-heading ps-3 pt-2 mb-2">Contents</div>
<nav id="toc"></nav>
</div>
</div>
</div>
<!-- tail -->
<div class="row">
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-3 pe-xl-4 mt-5">
<!--
Recommend the other 3 posts according to the tags and categories of the current post,
if the number is not enough, use the other latest posts to supplement.
-->
<!-- The total size of related posts -->
<!-- An random integer that bigger than 0 -->
<!-- Equals to TAG_SCORE / {max_categories_hierarchy} -->
<!-- Fill with the other newlest posts -->
<div id="related-posts" class="mb-2 mb-sm-4">
<h3 class="pt-2 mb-4 ms-1" data-toc-skip>
Further Reading
</h3>
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
<div class="col">
<a href="/posts/Flaws.cloud-AWS/" class="card post-preview h-100">
<div class="card-body">
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class="small"
data-ts="1692822983"
data-df="ll"
>
Aug 23, 2023
</em>
<h4 class="pt-0 my-2" data-toc-skip>Flaws.cloud walkthrough</h4>
<div class="text-muted small">
<p>
Flaws.cloud walkthrough
DayCyberWox Walkthrough: https://www.youtube.com/watch?v=fEjAryrzLSQ
Write up: https://daycyberwox.com/exploiting-aws-1-a-beginners-guide-flawscloud#heading-level1
1
2
3
4...
</p>
</div>
</div>
</a>
</div>
<div class="col">
<a href="/posts/Building-a-Custom-Malware-Analysis-Lab-Environment/" class="card post-preview h-100">
<div class="card-body">
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class="small"
data-ts="1692822826"
data-df="ll"
>
Aug 23, 2023
</em>
<h4 class="pt-0 my-2" data-toc-skip>Building a Custom Malware Analysis Lab Enviornment</h4>
<div class="text-muted small">
<p>
https://www.sentinelone.com/labs/building-a-custom-malware-analysis-lab-environment/
Introduction
Building the right malware analysis environment is the first step for every malware researcher. ...
</p>
</div>
</div>
</a>
</div>
<div class="col">
<a href="/posts/Mac-M1-Run-Diablo-4/" class="card post-preview h-100">
<div class="card-body">
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<em
class="small"
data-ts="1692804979"
data-df="ll"
>
Aug 23, 2023
</em>
<h4 class="pt-0 my-2" data-toc-skip>Mac M1 Run Diablo 4 - Links</h4>
<div class="text-muted small">
<p>
Resources that can help you get started with the Game Porting Tool Kit to run Diablo 4 on Mac M1 architecture.
Resources:
https://www.outcoldman.com/en/archive/2023/06/07/playing-diablo-4-on-...
</p>
</div>
</div>
</a>
</div>
</div>
<!-- .card-deck -->
</div>
<!-- #related-posts -->
<!-- Navigation buttons at the bottom of the post. -->
<div class="post-navigation d-flex justify-content-between">
<div
class="btn btn-outline-primary disabled"
prompt="Older"
>
<p>-</p>
</div>
<a
href="/posts/Admonitions-Documentation/"
class="btn btn-outline-primary"
prompt="Newer"
>
<p>Admonitions Documentation</p>
</a>
</div>
<!-- The comments switcher -->
</div>
</div>
<!-- The Search results -->
<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
<div class="col-11 post-content">
<div id="search-hints">
<!-- The trending tags list -->
<div id="access-tags">
<div class="panel-heading">Trending Tags</div>
<div class="d-flex flex-wrap mt-3 mb-1 me-3">
<a class="post-tag btn btn-outline-primary" href="/tags/cybersecurity/">cybersecurity</a>
<a class="post-tag btn btn-outline-primary" href="/tags/diablo-4/">diablo 4</a>
<a class="post-tag btn btn-outline-primary" href="/tags/docs/">docs</a>
<a class="post-tag btn btn-outline-primary" href="/tags/terminal/">terminal</a>
<a class="post-tag btn btn-outline-primary" href="/tags/diablo/">diablo</a>
<a class="post-tag btn btn-outline-primary" href="/tags/m1/">M1</a>
<a class="post-tag btn btn-outline-primary" href="/tags/apple-silicon/">apple silicon</a>
<a class="post-tag btn btn-outline-primary" href="/tags/cheatsheets/">cheatsheets</a>
<a class="post-tag btn btn-outline-primary" href="/tags/cloud/">cloud</a>
<a class="post-tag btn btn-outline-primary" href="/tags/gcih/">GCIH</a>
</div>
</div>
</div>
<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
</div>
</div>
</div>
</div>
<!-- The Footer -->
<footer>
<div class="container px-lg-4">
<div class="d-flex justify-content-center align-items-center text-muted mx-md-3">
<p>Using the <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a> theme <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
</p>
<p>©
2023
<a href="https://github.com/username">Eric Reymundo</a>.
<span
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author."
>Some rights reserved.</span>
</p>
</div>
</div>
</footer>
<div id="mask"></div>
<button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">
<i class="fas fa-angle-up"></i>
</button>
<div
id="notification"
class="toast"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-bs-animation="true"
data-bs-autohide="false"
>
<div class="toast-header">
<button
type="button"
class="btn-close ms-auto"
data-bs-dismiss="toast"
aria-label="Close"
></button>
</div>
<div class="toast-body text-center pt-0">
<p class="px-2 mb-3">A new version of content is available.</p>
<button type="button" class="btn btn-primary" aria-label="Update">
Update
</button>
</div>
</div>
<!-- JS selector for site. -->
<!-- commons -->
<!-- layout specified -->
<!-- image lazy-loading & popup & clipboard -->
<script src="https://cdn.jsdelivr.net/combine/npm/jquery@3.7.0/dist/jquery.min.js,npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js,npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js,npm/lazysizes@5.3.2/lazysizes.min.js,npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js,npm/clipboard@2.0.11/dist/clipboard.min.js,npm/dayjs@1.11.7/dayjs.min.js,npm/dayjs@1.11.7/locale/en.min.js,npm/dayjs@1.11.7/plugin/relativeTime.min.js,npm/dayjs@1.11.7/plugin/localizedFormat.min.js,npm/tocbot@4.21.0/dist/tocbot.min.js,npm/mermaid@9.4.3/dist/mermaid.min.js"></script>
<script defer src="/assets/js/dist/post.min.js"></script>
<!-- MathJax -->
<script>
/* see: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options> */
MathJax = {
tex: {
/* start/end delimiter pairs for in-line math */
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
/* start/end delimiter pairs for display math */
displayMath: [
['$$', '$$'],
['\\[', '\\]']
]
}
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js"></script>
<!-- mermaid-js loader -->
<script type="text/javascript">
(function () {
function updateMermaid(event) {
if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
const mode = event.data.message;
if (typeof mermaid === 'undefined') {
return;
}
let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
let config = { theme: expectedTheme };
/* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
$('.mermaid').each(function () {
let svgCode = $(this).prev().children().html();
$(this).removeAttr('data-processed');
$(this).html(svgCode);
});
mermaid.initialize(config);
mermaid.init(undefined, '.mermaid');
}
}
let initTheme = 'default';
const html = document.documentElement;
if (
(html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
(!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
initTheme = 'dark';
}
let mermaidConf = {
theme: initTheme /* <default|dark|forest|neutral> */
};
/* Create mermaid tag */
document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
const svgCode = elem.textContent;
const backup = elem.parentElement;
backup.classList.add('unloaded');
/* create mermaid node */
let mermaid = document.createElement('pre');
mermaid.classList.add('mermaid');
const text = document.createTextNode(svgCode);
mermaid.appendChild(text);
backup.after(mermaid);
});
mermaid.initialize(mermaidConf);
window.addEventListener('message', updateMermaid);
})();
</script>
<!--
Jekyll Simple Search loader
See: <https://github.com/christian-fei/Simple-Jekyll-Search>
-->
<script>
/* Note: dependent library will be loaded in `js-selector.html` */
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'),
json: '/assets/js/data/search.json',
searchResultTemplate: '<div class="px-1 px-sm-2 px-lg-4 px-xl-0"> <a href="{url}">{title}</a> <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1"> {categories} {tags} </div> <p>{snippet}</p></div>',
noResultsText: '<p class="mt-5"></p>',
templateMiddleware: function(prop, value, template) {
if (prop === 'categories') {
if (value === '') {
return `${value}`;
} else {
return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
}
}
if (prop === 'tags') {
if (value === '') {
return `${value}`;
} else {
return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
}
}
}
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink