rouge icon indicating copy to clipboard operation
rouge copied to clipboard

Apply custom CSS classes to parts of the highlighted code

Open darkstar opened this issue 2 years ago • 1 comments

Is your enhancement request related to a problem? Please describe. In the documentation I write, I often want to reference certain parts of a larger snippet of code in the text below it. The code is highlighted with rouge. I would like a way to add custom CSS classes to certain parts of the whole highlight block, like highlight a particular keyword in one line, or mark user input bold in a larger terminal session

Describe the solution you'd like Some sort of "meta tag" that I can apply that is not highlighted but instead instructs rouge to apply some CSS class to the enclosed code after highlighting

Something like

def foo():
    # comment
    bar(); baz();
    frob({::blue}23{::});

Which would apply the CSS class blue to the number 23 in the function call on line 4

darkstar avatar Nov 20 '21 22:11 darkstar

Check this https://github.com/rouge-ruby/rouge/issues/617 Now you can use : Rouge::Formatters::HTMLLineHighlighter.new(formatter, highlight_lines: [3, 5]) it's indicate on the readme. For "how to use" examples, do a Github search with HTMLLineHighlighter or highlight_lines

BenSouchet avatar Jan 22 '22 20:01 BenSouchet