Eleventy - Syntax Highlighting

Preface

Goal: A method to highlight code.

Source Code

This article use tutor-08 theme. We will create it step by step.

1: Highlighting

There are at least two way to highlight in Hexo. 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/…/.eleventy.js

  // Official plugin
  eleventyConfig.addPlugin(syntaxHighlight);

Official Documentation

• www.11ty.dev/docs/plugins/syntaxhighlight

2: Fixing Bulma Stylesheet Issue

Eleventy’s highlight has a pre .number class, that conflict Bulma .number class. This is nobody’s fault since .number is, very common english word in CSS world.

Page Content: Example

Now edit one of your content, and put some code block.

• gitlab.com/…/views/lyrics/soulfly-jump-da-fuck-up.md

---
layout    : post
title     : Soulfly - Jump Da Fuck Up
date      : 2018-09-07 07:35:05
tags      : ["nu metal", "2000s"]
---

{% highlight "haskell" %}
-- Layout Hook
commonLayout = renamed [Replace "common"]
    $ avoidStruts 
    $ gaps [(U,5), (D,5)] 
    $ spacing 10
    $ Tall 1 (5/100) (1/3)
{% endhighlight %}

The result in the browser is not what we are expected.

The stylesheet is mixed-up with Bulma stylesheet.

Reset Number Class in SASS

Bulma is using .number element, while formatting the syntax highlight. What we need to do is unstyle the element.

SASS: Syntax Highlight

• gitlab.com/…/sass/css/post/_reset-highlight.sass

pre
  .number
    font-size: 100%
    display: inline
    margin-right: 0
    padding: 0 0
    background-color: transparent

Render: Browser

Now you can see have your expected result in the browser.

What is Next ?

We are done with all topics in this article series.

Consider continue reading [ Eleventy - Summary ]. There is at last a summary, about what Eleventy can do in this article series.

Thank you for reading.