Highlight.js improvements

[acahir]

I have a suggestion for improving the use of highlight.js in your theme.

Right now you are using scss to include your highlight settings into the minified css file style-nnm2....min.css. When split apart after scss processing, the generated rules are bloated (17k, 554 lines unminified) and hard to customize/override with a custom.css. See attached file extracted from theme repo file.

included_highlight_rules.txt

For comparison, most of the themes provided by the highlight.js project are under 1k and about 70 lines, such as Aria.

To remote all that bloat and make it easier to use a different highlight theme, I propose trimming _hljs-tranquilpeak.scss to only include the layout/sizing css and a default color and background. All your color theming could then be converted to a simple highlight.js theme file, and shouldn't need all the language specific selectors your scss file is outputting.

The highlight.js theme file could then easily be a configuration option or overridden using a customCSS parameter like any additional languages required.

From what I can see there's only a few changes required:

• _hljs-tranquilpeak.scss: only keep the layout/sizing css needed to display code blocks
• _hljs-custom.scss: remove
• layouts/partials/scripts.html: set classPrefix="hljs-", the default for highlight.js
• css selectors not covered by highlight.js: document or create a template of the few additional selectors not covered by highlight.js, ex gutter and figcaption

As a bonus, it would be great to clean up the html generated from the codeblock and tabbed-codeblock shortcodes to be more logical. The reuse of a figure inside a figure for the tabbed solution adds a lot of complexity, which could be avoided by having a consistent class only used for the actual <pre /><code /> block without another figure around it. This might be what you were referring to as incompatibilities inherited from the Hexo theme in the user doc?

If this is a direction you'd like to go, I'm happy to submit a PR. I've already done most of the work figuring out how it was all setup to customize highlighting for myself.

[popei69]

I have the same issue while customising highlight css theme. That would be great if we can easily customise and switch to another one.

[kakawait]

@acahir totally agree about improving way to allow customize current hljs

To be honest I don't totally understand your solution but if it work why not :)

As you may understand many things are inherited from original Hexo theme, so I'm open to improvement if worth it

I'm OK for PR and maybe with code it will be clearer for me

BTW I related to #242 so I had intention to improve that thing

[kakawait]

the only requirement is to keep existing style/UI-result default as same as before. I mean if no customization new version should be the same render as before. But allowing and improving customization must be the focus