Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 


Preface

Goal: A few method to highlight code.

From default, triple backtick, to prismjs.

Table of Content

  • Preface: Table of Content

  • 1: Highlighting

  • 2: Stylesheet Issue

  • 3: Reset Class in Figure Element

  • What is Next ?

Source Code

You can download the source code of this article here.

Extract and run on CLI using $ npm install.


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)
```

Code Block

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

2: Stylesheet Issue

Code block is not pygment compatible

Content: Example

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

Plain

Plain without language type should not have any stylesheet issue.

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

The result in the browser is just fine

Hexo Syntax Highlighting: Plain

Formatting

Adding language type would result in html formatting.

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

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

Hexo Syntax Highlighting: Formatting

The stylesheet is mixed-up with Bulma stylesheet.


3: Reset Class in Figure Element

Hexo code block is using figure element, while formatting the syntax highlight. What we need to do is unstyle, the class inside figure element.

SASS: Syntax Highlight

figure.highlight
  table
    span.line
      .title, .number, .type, .string
        font-size: unset
        padding:   unset
        margin:    unset
        height:    unset
        min-width: unset

I also style the layout. So long code won’t occupy the whole page.

figure.highlight
  table
    max-height: 350px

You may also add necessary nice color.

figure.highlight
  table
    span.line
      .title
        color: #1976d2 // blue 700        
      .comment
        color: #9e9e9e // grey 500
        font-style: oblique
      .number
        color: #0097a7 // cyan 700
        font-weight: 500
      .type
        color: #3f51b5 // indigo 500
        text-decoration: underline dotted
      .string
        color: #004d40 // teal 900
        font-style: italic
        text-decoration: underline wavy
      :hover
        background-color: $yellow
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15)
    tbody
      box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15)
    tbody:hover
      box-shadow: 0 1rem 3rem rgba($black, .175)

This is just an example. Of course you can add your own style. Such as adding horizontal scrollbar or else.

Render: Browser

Now you can see the result in the browser.

Hexo Syntax Highlighting: Reset Class in Figure Element


What is Next ?

Consider continue reading [ Hexo - Meta - SEO ]. There are, some interesting topic about using Meta in Hexo, such as Opengraph and Twitter.

Thank you for reading.