Proposal to add mark (line highlight) support to code block tag plugin

[lotabout]

When writing codes, sometimes we'll need to highlight some lines like:

As for how to specify the lines, we could follow octpress' rules, i.e.

mark:#,#-# - Mark one or more lines of code with the class name "marked". Accepts one number, numbers separated by commas, and number ranges. Example mark:1,5-8 will mark lines 1,5,6,7,8. Note: If you've changed the beginning line number be sure these match rendered line numbers

So that we could have something like:

{% codeblock mark:1,5-8 %}
code snippet
{% endcodeblock %}

As hexo depends on hexo-util for highlighting, I've submit an issue to hexo-util for adding such support. However we still need support from hexo's tag plugin.

[greg-js]

+1

[greg-js]

I'm just a guy who read this and really wanted this feature for my blog so I made a pretty basic version of it in order to highlight lines in my own code snippets, just figured I'd share

[leesei]

Thanks.

[leesei]

@greg-js I see the div has class="line marked" But I think we need a CSS to actually highlight the line. Did you changed the style in theme?

[greg-js]

I didn't, I figured it was up to the theme designers to decide how to style it. On my own blog I made it dark yellow but I'm using a custom highlight theme. On Feb 26, 2016 8:41 AM, "leesei" notifications@github.com wrote:

@greg-js https://github.com/greg-js I see the div has class="line marked" But I think we need a CSS to actually highlight the line. Did you changed the style in theme?

— Reply to this email directly or view it on GitHub https://github.com/hexojs/hexo/issues/1756#issuecomment-189149590.

[leesei]

I see.

[leesei]

One more question, the gutter don't have the mark class, is it intended (your snapshot seems to also mark the gutter)?

[greg-js]

Oh I didn't make or recreate that screenshot as that would have involved rewriting the whole code block. In my implementation, just the code lines are styled because that could be done just by changing a span and line break to a div. I'm on holiday in Spain now until early next week but could do some work on completely rewriting the code block when I get back if you'd like.

[leesei]

Current: http://leesei.github.io/hexo-vanilla-site/2016/02/26/1756/

Naive mockup by adding '.marked' to '.gutter.line':

I think highlighting the whole line requires some tinkering. The current behavior is okay AFAIC, actually better than my mockup.

[greg-js]

Yeah, I ran into the exact same problem, the code block would have to be reimplemented to support styling the gutter. It's doable but maybe not really worth the effort since just the line looks pretty good imo and it's not distracting.

And I really like the shade of gray you chose for the highlight in the default theme, much nicer than my yellow for sure.

[leesei]

Credits to Tomorrow theme