Hexo: How to generate highlightjs's style of codeblock

[xcatliu]

Using the default config will generate code block like this:

<figure class="highlight plain"><table><tbody>
  <tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">import</span> <span class="string">'mobi.css/src/mobi'</span>;</div></pre></td></tr>
</tbody></table></figure>

Is there a way to generate code block like the official highlightjs's stlye?

<pre><code class="hljs scss">
  @<span class="hljs-keyword">import</span> <span class="hljs-string">'mobi.css/src/mobi'</span>;
</code></pre>

[stackOverMind]

gutter can be removed by setting:

highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace:

[xcatliu]

@stackOverMind Setting line-number to false will only disable lines, but the generated code is still <figure><table>, how to generate <pre><code> like http://highlightjs.org did? Then I can reuse all the styles that http://highlightjs.org provides.

[leggetter]

@xcatliu The code for highlight is available via https://github.com/hexojs/hexo-util/blob/master/lib/highlight.js

So, you could take that and customise it to suit your needs. I think that's something we may do as we want to make the code highlighting functionality more of our own.

Maybe build your own tag that uses the functionality.

[bensmithett]

I had this problem too. It seems like hexo was configured to use the old non-hljs style way back in 001b89d9bd7a6a13f0504d54c09278bf11cf594d to fix #434.

I think this block is the problem - seems odd to kill highlight's default, good-for-css-architecture behaviour in hexo to fix a CSS problem in some hexo themes.

Happy to PR up a change reversing this if anyone involved thinks it's a good idea?

[NoahDragon]

@bensmithett Agree. The classPrefix: '' should be configurable in _config.yml.

[mathiasbynens]

+1 to somehow making it easy to customize highlight output. Being able to define a custom util.highlight would be an elegant solution.

In my case, I want something like:

<pre><code class="language-%language%">%code%</code></pre>

The classPrefix thing is a separate (but related) issue.

[matthidinger]

I see the latest version of the code has references to <pre><code> but I can't quite figure out how to activate it. Is the workaround mentioned in this issue still necessary or has another trick been added?

[alxbl]

@matthidinger Hey, sorry for the late reply, I've been busy with other stuff. Unless the highlighting code has changed since, the PR I made (https://github.com/hexojs/hexo-util/pull/30) should still work, that is, you can add hljs: true in your highlight section to get the rendering with Highlight.js.

I'm not an active contributor so I haven't been keeping up with latest development, but if it doesn't work for you, let me know and I'll look into it.

Cheers,
Alex

[stevenjoezhang]

hljs: true worked like a charm. Maybe this issue can be closed.

[SukkaW]

# _config.yml
highlight:
  enable: true
  hljs: true
  wrap: true

The config should be all right then. Works on Hexo 4.0.0 or later.