Preface
Goal: More about blog post content, Header, Footer, and Navigation.
Source Code
This article use [tutor-11][tutor-html-master-11] theme. We will create it step by step.
1: Markdown
There is not much to say about markdown. Most topic have already been discussed in previous article:
We just need a few stylesheet adjustment.
SASS
My complete sass
is as below:
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
.blog-body {
margin-bottom: 1rem;
}
.blog-header {
h1, h2, h3, h4, h5, h6 {
margin-bottom: .25rem;
a {
color: map-get($oc-gray-list, "9");
}
a:hover {
color: map-get($oc-gray-list, "6") !important;
}
}
}
.blog-header .meta {
margin-bottom: 2.0rem;
}
.blog-body p {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
Space between paragraph, should be distinct, with space between lines. Without stylesheet above, you should still be fine.
Shortcodes
Already discussed in previous artcle. Consider see how it looks with frame.
2: Syntax Highlighting
There are at least two way to highlight in Jekyll. Both should show similar result.
Triple Backtick
```haskell
-- Layout Hook
commonLayout = renamed [Replace "common"]
$ avoidStruts
$ gaps [(U,5), (D,5)]
$ spacing 10
$ Tall 1 (5/100) (1/3)
```
Highlight Tag Directive
{% highlight haskell %}
-- Layout Hook
commonLayout = renamed [Replace "common"]
$ avoidStruts
$ gaps [(U,5), (D,5)]
$ spacing 10
$ Tall 1 (5/100) (1/3)
{% endhighlight %}
Configuration
To enable this you should configure .eleventy.js
first.
# Build settings
markdown: kramdown
highlighter: rouge
You can also use pygments
instead.
Official Documentation
SASS
I provide two SASS
I do not own the source code. I grab them from somewhere.
Render: Browser
Now you can see have your expected result in the browser.
3: MathJax
MathJax is a huge topic that deserve their own article series. But using MathJax is simple and straight away.
This Mathjax can be in both markdown
and html
.
So it is not specifically designed for markdown only content.
I have plan to use LaTeX and MathJax extensively. so I put this MathJax setting in this chapter. Just in case I forget, I can find my own example easily.
Partial: Liquid: Scripts
MathJax can be use directly by using setting up this partial below:
{% if page.mathjax %}
{% include site/mathjax.html %}
{% endif %}
Or in a complete anner, as below code:
{% comment %}
JavaScript at end of body for optimized loading
{% endcomment %}
{% if page.mathjax %}
{% include site/mathjax.html %}
{% endif %}
{% if page.customjs %}
{% for js in page.customjs %}
<script src="{{ site.baseurl }}{{ js }}"></script>
{% endfor %}
{% endif %}
<script>
feather.replace()
</script>
This means you have to set the frontmatter for using MathJax.
mathjax : true
Page Content: Post
Again, content for example purpose:
---
layout : post
title : Nicole Atkins - A Night of Serious Drinking
...
mathjax : true
---
On a jet plane sailing through the night
I find I’m thinking of you
9 years ago was just like yesterday
$$ \lim\limits_{x \to \infty} \exp(-x) = 0 $$
On a jet plane sailing through the night
I guess I’m wasting precious time
Seven years ago you told me you had plans to go
$$ \int_0^\infty \mathrm{e}^{-x}\,\mathrm{d}x $$
This jet plane lands silently still
Can’t believe I’ll be there soon
Three years ago felt like a lifetime
What is Next?
Consider continue reading [ Jekyll - Summary ].
Thank you for reading.