Styling hardcoded <div> around CodeRay code table

[Quintus]

Hi there,

I’m trying to style a CodeRay code table (:coderay_line_numbers set to :table) in such a way that overflowing code is scrolled, i.e. I want to add

overflow-x: scroll

to the element containing the code table. As can bee seen at https://github.com/gettalong/kramdown/blob/master/lib/kramdown/converter/html.rb#L109 this is sadly a hardcoded <div> element without any class or other identifier set, making it unreachable for CSS (unless you put an HTML attribute list after each and every single codeblock you write to include a class). Applying overflow-x: scroll to the table itself doesn’t work, because it’s the table that overflows itself, requiring me to set this on the parent element, which is unreachable without changing kramdown’s code. Here’s an example of the generated HTML (the nonsense code is just to make it overflow):

<div><table class="CodeRay"><tr>
  <td class="line-numbers"><pre><a href="#n1" name="n1">1</a>
<a href="#n2" name="n2">2</a>
<a href="#n3" name="n3">3</a>
<a href="#n4" name="n4">4</a>
<a href="#n5" name="n5">5</a>
</pre></td>
  <td class="code"><pre><span class="comment"># foo.rb</span>
<span class="keyword">def</span> <span class="function">foo</span>
  puts <span class="string"><span class="delimiter">&quot;</span><span class="content">Hi</span><span class="delimiter">&quot;</span></span>
  jkdhg dkjghd kjhdfg kjhdfg  dkjfghdgh dfhgdkghdg dkjdjg(gdg) jsdhfs ksjdfhsjfs kjjjj skdjf
<span class="keyword">end</span>
</pre></td>
</tr></table>
</div>

A workaround is setting :coderay_line_numbers to :inline, but this in turn makes simple select-n-copy by mouse impossible (because the line numbers are now copied, too). Disabling line numbers altogether is not an option for me, as I sometimes have quite long code listings.

Suggestion: Add a new option coderay_div_class or something like that that allows to globally apply a class to the <div> sorrounding a coderay table.

Valete,
Quintus

[gettalong]

I would either assign a block IAL to each codeblock or use a small javascript statement to style the parent <div> element dynamically.

[simonvanderveldt]

@gettalong can you please reconsider this?
A simple class="CodeRay" for the containing div would be sufficient for most cases.

Javascript shouldn't be used for styling and adding a Block Inline Attribute Lists feels very clumsy, especially when using Fenced code (which keeps the markdown nice an (c)lean).

[thierryk]

@gettalong can you please reconsider this?

+1

In my opinion, it makes little sense to offer an "anonymous" wrapper. Because without a proper hook, authors have to wrap their code blocks inside an extra div to get the styling they want....

I was expecting to find the class CodeRay on the outer div, not on the first-child of that wrapper. We can easily target a first-child, but not a parent -- at least not yet (!div > .CodeRay)

[gettalong]

Support for syntax highlighting will be changed in one of the next release to allow other highlighters - then I will change this.

[thierryk]

👏

[gettalong]

The next version of kramdown will finally have such a class value. I.e. in case of coderay it would be highlighter-coderay.