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.
-
- source/_posts/lyrics/dido-white-flag.md
- gitlab.com/…/dido-white-flag.md
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
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.
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
-
- themes/tutor-05/sass/css/_post-highlight-hexo.sass
- gitlab.com/…/sass/_post-highlight-hexo.sass.
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.
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.