bridgetown icon indicating copy to clipboard operation
bridgetown copied to clipboard

feat: Highlighted Lines in Markdown Code Blocks

Open jonsgreen opened this issue 2 years ago • 3 comments

Summary

Bridgetown currently supports code block syntax highlighting out of the box with the help of Kramdown/Rouge. However, there currently is no way to highlight specific lines within a code block which can be done with other syntax highlighting tools (e.g. Prism).

Motivation

Being able to highlight specific lines of code can be very helpful when blogging and you want emphasize the parts of the code that are of most interest.

Drawbacks

This may ultimately be a feature that needs to be supported within Kramdown and could not be worth the effort at this time.

jonsgreen avatar Jul 20 '22 19:07 jonsgreen

Some relevant code paths based on preliminary research:

  • https://github.com/rouge-ruby/rouge/blob/master/lib/rouge/formatters/html_line_highlighter.rb
  • https://github.com/gettalong/kramdown/blob/master/lib/kramdown/converter/syntax_highlighter/rouge.rb

jaredcwhite avatar Jul 20 '22 19:07 jaredcwhite

@jaredcwhite i believe Rouge also recently shipped support for highlighting lines.

https://github.com/rouge-ruby/rouge/issues/1767#issuecomment-1019349409

KonnorRogers avatar Jul 20 '22 20:07 KonnorRogers

I'm doing some issue gardening 🌱🌿 🌷 and came upon this issue.

This sounds like something that should live in a plugin, or outside Bridgetown core.

I'd even say it's probably something that doesn't even need to be a plugin, it could just be a per-site adjustment. Applying code-highlight via JS is literally a one-liner (https://highlightjs.org/usage/).

By closing some old issues we reduce the list of open issues to a more manageable set.

sandstrom avatar Jul 12 '23 11:07 sandstrom