Jekyll Bulma - Content

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:

• Jekyll Plain - Markdown

We just need a few stylesheet adjustment.

SASS

• gitlab.com/…/_sass/css/post/_content.sass

My complete sass is as below:

h1, h2, h3, h4, h5, h6
  font-family: "Playfair Display", Georgia, "Times New Roman", serif

.blog-header .title a
  color: map-get($grey, "darken-3")

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

• gitlab.com/…/_config.yaml

# Build settings
markdown: kramdown
highlighter: rouge

You can also use pygments instead.

Official Documentation

• rouge-ruby.github.io/docs

SASS

I provide two SASS

• Bright Highlighter

• Dark Highlighter

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:

• gitlab.com/…/_includes/scripts.html

  {% 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:

• gitlab.com/…/_post/lyrics/2017-03-25-nicole-atkins-a-night-of-serious-drinking.md

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