Jekyll Bootstrap - Content

   
   
 jekyll  bootstrap  
 ssg  
Article Series

Jekyll in General

Jekyll Plain

Jekyll Bootstrap OC

Jekyll Bulma MD

Conclusions

Repository

Where to Discuss?

Local Group

Table of 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:

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.

Jekyll: Markdown: SASS Space

Shortcodes

Already discussed in previous artcle. Consider see how it looks with frame.

Jekyll: Shortcodes: Commercial

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.

Jekyll Syntax Highlighting: Formatting Fixed

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

Jekyll Markdown: MathJax

What is Next?

Consider continue reading [ Jekyll - Summary ].

Thank you for reading.