mirror of
https://gitlab.com/MisterBiggs/blog-static.git
synced 2025-06-15 22:56:49 +00:00
734 lines
30 KiB
HTML
734 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<title>How to use Mermaid on your Ghost Blog</title>
|
|
<meta name="HandheldFriendly" content="True" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" type="text/css" href="../assets/built/screen.css" />
|
|
<meta
|
|
name="description"
|
|
content="Render Mermaid code into beautiful diagrams on your Ghost Blog."
|
|
/>
|
|
<link rel="shortcut icon" href="../favicon.png" type="image/png" />
|
|
<link
|
|
rel="canonical"
|
|
href="https://blog.ansonbiggs.com/how-to-use-mermaid/"
|
|
/>
|
|
<meta name="referrer" content="no-referrer-when-downgrade" />
|
|
|
|
<meta property="og:site_name" content="Anson 3D" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:title" content="How to use Mermaid on your Ghost Blog" />
|
|
<meta
|
|
property="og:description"
|
|
content="Render Mermaid code into beautiful diagrams on your Ghost Blog."
|
|
/>
|
|
<meta
|
|
property="og:url"
|
|
content="https://blog.ansonbiggs.com/how-to-use-mermaid/"
|
|
/>
|
|
<meta
|
|
property="og:image"
|
|
content="../content/images/2019/01/Code_2019-01-06_03-24-26.png"
|
|
/>
|
|
<meta
|
|
property="article:published_time"
|
|
content="2019-01-04T10:53:49.000Z"
|
|
/>
|
|
<meta property="article:modified_time" content="2019-01-06T10:24:48.000Z" />
|
|
<meta property="article:tag" content="Guide" />
|
|
<meta property="article:tag" content="Fluff" />
|
|
<meta
|
|
property="article:publisher"
|
|
content="https://www.facebook.com/Anson3D"
|
|
/>
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta
|
|
name="twitter:title"
|
|
content="How to use Mermaid on your Ghost Blog"
|
|
/>
|
|
<meta
|
|
name="twitter:description"
|
|
content="Render Mermaid code into beautiful diagrams on your Ghost Blog."
|
|
/>
|
|
<meta
|
|
name="twitter:url"
|
|
content="https://blog.ansonbiggs.com/how-to-use-mermaid/"
|
|
/>
|
|
<meta
|
|
name="twitter:image"
|
|
content="https://blog.ansonbiggs.com/content/images/2019/01/Code_2019-01-06_03-24-26.png"
|
|
/>
|
|
<meta name="twitter:label1" content="Written by" />
|
|
<meta name="twitter:data1" content="Anson Biggs" />
|
|
<meta name="twitter:label2" content="Filed under" />
|
|
<meta name="twitter:data2" content="Guide, Fluff" />
|
|
<meta name="twitter:site" content="@Anson_3D" />
|
|
<meta name="twitter:creator" content="@Anson_3D" />
|
|
<meta property="og:image:width" content="470" />
|
|
<meta property="og:image:height" content="260" />
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Article",
|
|
"publisher": {
|
|
"@type": "Organization",
|
|
"name": "Anson 3D",
|
|
"logo": {
|
|
"@type": "ImageObject",
|
|
"url": "https://blog.ansonbiggs.com/favicon.png",
|
|
"width": 60,
|
|
"height": 60
|
|
}
|
|
},
|
|
"author": {
|
|
"@type": "Person",
|
|
"name": "Anson Biggs",
|
|
"image": {
|
|
"@type": "ImageObject",
|
|
"url": "https://blog.ansonbiggs.com/content/images/2019/09/anson_suit_cropped.jpg",
|
|
"width": 1513,
|
|
"height": 1090
|
|
},
|
|
"url": "https://blog.ansonbiggs.com/author/anson/",
|
|
"sameAs": ["http://ansonbiggs.com", "https://twitter.com/AnsonBiggs"]
|
|
},
|
|
"headline": "How to use Mermaid on your Ghost Blog",
|
|
"url": "https://blog.ansonbiggs.com/how-to-use-mermaid/",
|
|
"datePublished": "2019-01-04T10:53:49.000Z",
|
|
"dateModified": "2019-01-06T10:24:48.000Z",
|
|
"image": {
|
|
"@type": "ImageObject",
|
|
"url": "https://blog.ansonbiggs.com/content/images/2019/01/Code_2019-01-06_03-24-26.png",
|
|
"width": 470,
|
|
"height": 260
|
|
},
|
|
"keywords": "Guide, Fluff",
|
|
"description": "Render Mermaid code into beautiful diagrams on your Ghost Blog.",
|
|
"mainEntityOfPage": {
|
|
"@type": "WebPage",
|
|
"@id": "https://blog.ansonbiggs.com/"
|
|
}
|
|
}
|
|
</script>
|
|
<script
|
|
src="../public/ghost-sdk.min.js"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
<script type="99af7d44d93cc1b1338b6d55-text/javascript">
|
|
ghost.init({
|
|
clientId: "ghost-frontend",
|
|
clientSecret: "245af786ee20"
|
|
});
|
|
</script>
|
|
<meta name="generator" content="Ghost 2.31" />
|
|
<link
|
|
rel="alternate"
|
|
type="application/rss+xml"
|
|
title="Anson 3D"
|
|
href="https://blog.ansonbiggs.com/rss/"
|
|
/>
|
|
<script
|
|
async
|
|
src="https://analytics.ansonbiggs.com/tracker.js"
|
|
data-ackee-server="https://analytics.ansonbiggs.com"
|
|
data-ackee-domain-id="0846bb59-c7b6-4a0b-bc05-135f82425319"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
<script
|
|
src="https://unpkg.com/mermaid@8.0.0/dist/mermaid.min.js"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
<script type="99af7d44d93cc1b1338b6d55-text/javascript">
|
|
mermaid.initialize({startOnLoad:true});
|
|
</script>
|
|
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/prism.min.js"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/line-numbers/prism-line-numbers.min.js"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism.min.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/line-numbers/prism-line-numbers.min.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism-coy.min.css"
|
|
/>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-powershell.min.js"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-css.min.js"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-c.min.js"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-clike.min.js"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-python.min.js"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
|
|
<script
|
|
async
|
|
src="https://www.googletagmanager.com/gtag/js?id=UA-99766784-3"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
<script type="99af7d44d93cc1b1338b6d55-text/javascript">
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'UA-99766784-3');
|
|
</script>
|
|
|
|
<script
|
|
data-name="BMC-Widget"
|
|
src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
|
|
data-id="Anson"
|
|
data-description="Support my work on Buy me a coffee!"
|
|
data-message="Please consider donating if you enjoy my content!"
|
|
data-color="#5F7FFF"
|
|
data-position="right"
|
|
data-x_margin="18"
|
|
data-y_margin="18"
|
|
></script>
|
|
</head>
|
|
|
|
<body class="post-template tag-guide tag-fluff">
|
|
<div class="site-wrapper">
|
|
<header class="site-header outer">
|
|
<div class="inner">
|
|
<nav class="site-nav">
|
|
<div class="site-nav-left">
|
|
<a class="site-nav-logo" href="../">Anson 3D</a>
|
|
<ul class="nav" role="menu">
|
|
<li class="nav-home" role="menuitem"><a href="../">Home</a></li>
|
|
<li class="nav-downloads" role="menuitem">
|
|
<a href="../where-to-download-my-models/">Downloads</a>
|
|
</li>
|
|
<li class="nav-yet-another-test-suite" role="menuitem">
|
|
<a href="../yet-another-test-suite/"
|
|
>Yet Another Test Suite</a
|
|
>
|
|
</li>
|
|
<li class="nav-tags" role="menuitem">
|
|
<a href="../tags/">Tags</a>
|
|
</li>
|
|
<li class="nav-resume" role="menuitem">
|
|
<a href="http://ansonbiggs.com">Resume</a>
|
|
</li>
|
|
<li class="nav-partners" role="menuitem">
|
|
<a href="https://projects.ansonbiggs.com">Projects</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="site-nav-right">
|
|
<div class="social-links">
|
|
<a
|
|
class="social-link social-link-fb"
|
|
href="https://www.facebook.com/Anson3D"
|
|
title="Facebook"
|
|
target="_blank"
|
|
rel="noopener"
|
|
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
|
<path
|
|
d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
<a
|
|
class="social-link social-link-tw"
|
|
href="https://twitter.com/AnsonBiggs"
|
|
title="Twitter"
|
|
target="_blank"
|
|
rel="noopener"
|
|
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
|
<path
|
|
d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<main id="site-main" class="site-main outer">
|
|
<div class="inner">
|
|
<article class="post-full post tag-guide tag-fluff">
|
|
<header class="post-full-header">
|
|
<section class="post-full-meta">
|
|
<time class="post-full-meta-date" datetime="2019-01-04"
|
|
>4 January 2019</time
|
|
>
|
|
<span class="date-divider">/</span>
|
|
<a href="../tag/guide/">Guide</a>
|
|
</section>
|
|
<h1 class="post-full-title">
|
|
How to use Mermaid on your Ghost Blog
|
|
</h1>
|
|
</header>
|
|
<figure class="post-full-image">
|
|
<img
|
|
srcset="
|
|
../content/images/size/w300/2019/01/Code_2019-01-06_03-24-26.png 300w,
|
|
../content/images/size/w600/2019/01/Code_2019-01-06_03-24-26.png 600w,
|
|
../content/images/size/w1000/2019/01/Code_2019-01-06_03-24-26.png 1000w,
|
|
../content/images/size/w2000/2019/01/Code_2019-01-06_03-24-26.png 2000w
|
|
"
|
|
sizes="(max-width: 800px) 400px,
|
|
(max-width: 1170px) 700px,
|
|
1400px"
|
|
src="../content/images/size/w2000/2019/01/Code_2019-01-06_03-24-26.png"
|
|
alt="How to use Mermaid on your Ghost Blog"
|
|
/>
|
|
</figure>
|
|
<section class="post-full-content">
|
|
<div class="post-content">
|
|
<h2 id="whatismermaid">What is Mermaid?</h2>
|
|
<div class="mermaid">graph TD; A-->B; A-->C; B-->D; C-->D;</div>
|
|
<p>
|
|
Diagrams like the one above usually require expensive software
|
|
to create and have GUIs that can be a pain to use. Mermaid
|
|
fixes this with a Markdown style approach by using a simple
|
|
syntax to generate beautiful diagrams, flowcharts and even
|
|
GANTT Charts quickly. For example, the above flowchart was
|
|
easily made with the following code.
|
|
</p>
|
|
<pre><code>graph TD;
|
|
A-->B;
|
|
A-->C;
|
|
B-->D;
|
|
C-->D;
|
|
</code></pre>
|
|
<p>
|
|
Mermaid has a large variety of chart types and many other
|
|
features that cover pretty much all the bases for any sort of
|
|
diagram or chart you would want to make.
|
|
<a href="https://mermaidjs.github.io/"
|
|
><strong
|
|
>The official documentation is the best resource to find
|
|
out more.</strong
|
|
></a
|
|
>
|
|
</p>
|
|
<p>
|
|
Mermaid support in markdown editors is becoming more popular,
|
|
but unfortunately, Ghost Markdown does not support this
|
|
feature. Luckily, it is effortless to add to a Ghost Blog so
|
|
you can get working.
|
|
</p>
|
|
<h2 id="addingmermaidtoghost">Adding Mermaid to Ghost</h2>
|
|
<div class="mermaid">
|
|
graph TD; A[Open Admin Interface] --> B[Open Code Injection] B
|
|
--> C[Paste Code] C --> D[???] D --> Profit???
|
|
</div>
|
|
<p>It's really as simple as the diagram makes it.</p>
|
|
<ol>
|
|
<li>
|
|
Open the ghost Admin Interface, i.e. www.yourblog.com/ghost
|
|
</li>
|
|
<li>Open the <em>Code Injection</em> Tab</li>
|
|
<li>
|
|
Paste the following code into the blog header section,
|
|
making sure that the version is the most recent which can be
|
|
<a href="https://unpkg.com/mermaid@8.0.0/dist/"
|
|
>found here</a
|
|
>
|
|
</li>
|
|
</ol>
|
|
<pre><code class="language-javascript"> <script src="https://unpkg.com/<a href="../cdn-cgi/l/email-protection/" class="__cf_email__" data-cfemail="5d30382f303c34391d65736d736d">[email protected]</a>/dist/mermaid.min.js"></script>
|
|
<script>mermaid.initialize({startOnLoad:true});</script>
|
|
</code></pre>
|
|
<p>
|
|
Then your blog should be able to render Mermaid. Unfortunately
|
|
it doesn't work natively in markdown with code blocks but
|
|
using html makes it render fine like the example below.
|
|
</p>
|
|
<pre><code class="language-html"><div class="mermaid">
|
|
graph TD;
|
|
A[Open Admin Interface] --> B[Open Code Injection]
|
|
B --> C[Paste Code]
|
|
C --> D[???]
|
|
D --> Profit???
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="post-full-footer">
|
|
<section class="author-card">
|
|
<img
|
|
class="author-profile-image"
|
|
src="../content/images/size/w100/2019/09/anson_suit_cropped.jpg"
|
|
alt="Anson Biggs"
|
|
/>
|
|
<section class="author-card-content">
|
|
<h4 class="author-card-name">
|
|
<a href="../author/anson/">Anson Biggs</a>
|
|
</h4>
|
|
<p>
|
|
I am an undergraduate Aerospace Engineering student with a
|
|
focus on Astronautics and a minor in Electronic Engineering
|
|
studying at Embry-Riddle Aeronautical University in
|
|
Prescott, Arizona.
|
|
</p>
|
|
</section>
|
|
</section>
|
|
<div class="post-full-footer-right">
|
|
<a class="author-card-button" href="../author/anson/"
|
|
>Read More</a
|
|
>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
</div>
|
|
</main>
|
|
<aside class="read-next outer">
|
|
<div class="inner">
|
|
<div class="read-next-feed">
|
|
<article
|
|
class="read-next-card"
|
|
style="
|
|
background-image: url(../content/images/size/w600/2018/08/007---3kLkMUL-1.jpg);
|
|
"
|
|
>
|
|
<header class="read-next-card-header">
|
|
<small class="read-next-card-header-sitetitle"
|
|
>— Anson 3D —</small
|
|
>
|
|
<h3 class="read-next-card-header-title">
|
|
<a href="../tag/guide/">Guide</a>
|
|
</h3>
|
|
</header>
|
|
<div class="read-next-divider">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path
|
|
d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="read-next-card-content">
|
|
<ul>
|
|
<li>
|
|
<a href="../simple-discord-stock-bot/"
|
|
>Simple Discord Stock Bot</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="../how-to-export-fusion-360-files-to-other-file-types/"
|
|
>How to Export Fusion 360 files to Other File Types</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="../putting-fusion-360-models-on-facebook/"
|
|
>Putting Fusion 360 Models on Facebook</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<footer class="read-next-card-footer">
|
|
<a href="../tag/guide/">See all 6 posts →</a>
|
|
</footer>
|
|
</article>
|
|
<article
|
|
class="post-card post tag-code tag-fluff tag-review tag-python no-image"
|
|
>
|
|
<div class="post-card-content">
|
|
<a
|
|
class="post-card-content-link"
|
|
href="../create-a-backup-of-your-chocolatey-packages-using-boxstarter/"
|
|
>
|
|
<header class="post-card-header">
|
|
<span class="post-card-tags">Code</span>
|
|
<h2 class="post-card-title">
|
|
Create a Backup of your Chocolatey Packages using
|
|
Boxstarter
|
|
</h2>
|
|
</header>
|
|
<section class="post-card-excerpt">
|
|
<p>
|
|
Introduction Chocolatey is command line package manager
|
|
for Windows that gives you a very Linux -esque software
|
|
installation experience. This guide expects that you
|
|
already are using Chocolatey, but in case you need
|
|
</p>
|
|
</section>
|
|
</a>
|
|
<footer class="post-card-meta">
|
|
<ul class="author-list">
|
|
<li class="author-list-item">
|
|
<div class="author-name-tooltip">Anson Biggs</div>
|
|
<a href="../author/anson/" class="static-avatar">
|
|
<img
|
|
class="author-profile-image"
|
|
src="../content/images/size/w100/2019/09/anson_suit_cropped.jpg"
|
|
alt="Anson Biggs"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<span class="reading-time">2 min read</span>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
<article
|
|
class="post-card post tag-functional-print tag-3d-printing tag-fusion360"
|
|
>
|
|
<a class="post-card-image-link" href="../oldie-vice/">
|
|
<img
|
|
class="post-card-image"
|
|
srcset="
|
|
../content/images/size/w300/2018/09/oldieViceBanner.png 300w,
|
|
../content/images/size/w600/2018/09/oldieViceBanner.png 600w,
|
|
../content/images/size/w1000/2018/09/oldieViceBanner.png 1000w,
|
|
../content/images/size/w2000/2018/09/oldieViceBanner.png 2000w
|
|
"
|
|
sizes="(max-width: 1000px) 400px, 700px"
|
|
src="../content/images/size/w600/2018/09/oldieViceBanner.png"
|
|
alt="[DEPRECATED] Oldie Vice"
|
|
/>
|
|
</a>
|
|
<div class="post-card-content">
|
|
<a class="post-card-content-link" href="../oldie-vice/">
|
|
<header class="post-card-header">
|
|
<span class="post-card-tags">Functional Print</span>
|
|
<h2 class="post-card-title">[DEPRECATED] Oldie Vice</h2>
|
|
</header>
|
|
<section class="post-card-excerpt">
|
|
<p>
|
|
Functional 3D Printable Vice great for electronics made by
|
|
Anson Biggs
|
|
</p>
|
|
</section>
|
|
</a>
|
|
<footer class="post-card-meta">
|
|
<ul class="author-list">
|
|
<li class="author-list-item">
|
|
<div class="author-name-tooltip">Anson Biggs</div>
|
|
<a href="../author/anson/" class="static-avatar">
|
|
<img
|
|
class="author-profile-image"
|
|
src="../content/images/size/w100/2019/09/anson_suit_cropped.jpg"
|
|
alt="Anson Biggs"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<span class="reading-time">6 min read</span>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<div class="floating-header">
|
|
<div class="floating-header-logo">
|
|
<a href="../">
|
|
<img
|
|
src="../content/images/size/w30/2018/08/Anson.png"
|
|
alt="Anson 3D icon"
|
|
/>
|
|
<span>Anson 3D</span>
|
|
</a>
|
|
</div>
|
|
<span class="floating-header-divider">—</span>
|
|
<div class="floating-header-title">
|
|
How to use Mermaid on your Ghost Blog
|
|
</div>
|
|
<div class="floating-header-share">
|
|
<div class="floating-header-share-label">
|
|
Share this
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path
|
|
d="M7.5 15.5V4a1.5 1.5 0 1 1 3 0v4.5h2a1 1 0 0 1 1 1h2a1 1 0 0 1 1 1H18a1.5 1.5 0 0 1 1.5 1.5v3.099c0 .929-.13 1.854-.385 2.748L17.5 23.5h-9c-1.5-2-5.417-8.673-5.417-8.673a1.2 1.2 0 0 1 1.76-1.605L7.5 15.5zm6-6v2m-3-3.5v3.5m6-1v2"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<a
|
|
class="floating-header-share-tw"
|
|
href="https://twitter.com/share?text=How%20to%20use%20Mermaid%20on%20your%20Ghost%20Blog&url=https://blog.ansonbiggs.com/how-to-use-mermaid/"
|
|
onclick="if (!window.__cfRLUnblockHandlers) return false; window.open(this.href, 'share-twitter', 'width=550,height=235');return false;"
|
|
data-cf-modified-99af7d44d93cc1b1338b6d55-
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
|
<path
|
|
d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
<a
|
|
class="floating-header-share-fb"
|
|
href="https://www.facebook.com/sharer/sharer.php?u=https://blog.ansonbiggs.com/how-to-use-mermaid/"
|
|
onclick="if (!window.__cfRLUnblockHandlers) return false; window.open(this.href, 'share-facebook','width=580,height=296');return false;"
|
|
data-cf-modified-99af7d44d93cc1b1338b6d55-
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
|
<path
|
|
d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<progress id="reading-progress" class="progress" value="0">
|
|
<div class="progress-container">
|
|
<span class="progress-bar"></span>
|
|
</div>
|
|
</progress>
|
|
</div>
|
|
<footer class="site-footer outer">
|
|
<div class="site-footer-content inner">
|
|
<section class="copyright">
|
|
<a href="../">Anson 3D</a> © 2019
|
|
</section>
|
|
<nav class="site-footer-nav">
|
|
<a href="../">Latest Posts</a>
|
|
<a
|
|
href="https://www.facebook.com/Anson3D"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>Facebook</a
|
|
>
|
|
<a
|
|
href="https://twitter.com/AnsonBiggs"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>Twitter</a
|
|
>
|
|
<a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
|
|
</nav>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script type="99af7d44d93cc1b1338b6d55-text/javascript">
|
|
var images = document.querySelectorAll('.kg-gallery-image img');
|
|
images.forEach(function (image) {
|
|
var container = image.closest('.kg-gallery-image');
|
|
var width = image.attributes.width.value;
|
|
var height = image.attributes.height.value;
|
|
var ratio = width / height;
|
|
container.style.flex = ratio + ' 1 0%';
|
|
})
|
|
</script>
|
|
<script
|
|
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
|
crossorigin="anonymous"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
<script
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
src="../assets/built/jquery.fitvids.js"
|
|
></script>
|
|
<script
|
|
src="../assets/built/infinitescroll.js"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
<script type="99af7d44d93cc1b1338b6d55-text/javascript">
|
|
|
|
// NOTE: Scroll performance is poor in Safari
|
|
// - this appears to be due to the events firing much more slowly in Safari.
|
|
// Dropping the scroll event and using only a raf loop results in smoother
|
|
// scrolling but continuous processing even when not scrolling
|
|
$(document).ready(function () {
|
|
// Start fitVids
|
|
var $postContent = $(".post-full-content");
|
|
$postContent.fitVids();
|
|
// End fitVids
|
|
|
|
var progressBar = document.querySelector('#reading-progress');
|
|
var header = document.querySelector('.floating-header');
|
|
var title = document.querySelector('.post-full-title');
|
|
|
|
var lastScrollY = window.scrollY;
|
|
var lastWindowHeight = window.innerHeight;
|
|
var lastDocumentHeight = $(document).height();
|
|
var ticking = false;
|
|
|
|
function onScroll() {
|
|
lastScrollY = window.scrollY;
|
|
requestTick();
|
|
}
|
|
|
|
function onResize() {
|
|
lastWindowHeight = window.innerHeight;
|
|
lastDocumentHeight = $(document).height();
|
|
requestTick();
|
|
}
|
|
|
|
function requestTick() {
|
|
if (!ticking) {
|
|
requestAnimationFrame(update);
|
|
}
|
|
ticking = true;
|
|
}
|
|
|
|
function update() {
|
|
var trigger = title.getBoundingClientRect().top + window.scrollY;
|
|
var triggerOffset = title.offsetHeight + 35;
|
|
var progressMax = lastDocumentHeight - lastWindowHeight;
|
|
|
|
// show/hide floating header
|
|
if (lastScrollY >= trigger + triggerOffset) {
|
|
header.classList.add('floating-active');
|
|
} else {
|
|
header.classList.remove('floating-active');
|
|
}
|
|
|
|
progressBar.setAttribute('max', progressMax);
|
|
progressBar.setAttribute('value', lastScrollY);
|
|
|
|
ticking = false;
|
|
}
|
|
|
|
window.addEventListener('scroll', onScroll, {passive: true});
|
|
window.addEventListener('resize', onResize, false);
|
|
|
|
update();
|
|
|
|
});
|
|
</script>
|
|
|
|
<script
|
|
src="https://embedd.io/embedd.min.js"
|
|
type="99af7d44d93cc1b1338b6d55-text/javascript"
|
|
></script>
|
|
<a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"
|
|
><img
|
|
alt="Creative Commons License"
|
|
style="border-width: 0"
|
|
src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a
|
|
><br />This work is licensed under a
|
|
<a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"
|
|
>Creative Commons Attribution-ShareAlike 4.0 International License</a
|
|
>.
|
|
<script
|
|
src="https://ajax.cloudflare.com/cdn-cgi/scripts/95c75768/cloudflare-static/rocket-loader.min.js"
|
|
data-cf-settings="99af7d44d93cc1b1338b6d55-|49"
|
|
defer
|
|
></script>
|
|
</body>
|
|
</html>
|