Hexo - Content - Syntax Highlighting

   
   
 hexo  css  js  
 ssg  frontend  
Article Series

This article series contain few sections.

Related Article Series

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: A few method to highlight code.

From default, triple backtick, to prismjs.

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.