New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling hardcoded <div> around CodeRay code table #76

Quintus opened this Issue Sep 2, 2013 · 6 comments


None yet
4 participants

Quintus commented Sep 2, 2013

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 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>
  <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>

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.


@ghost ghost assigned gettalong Sep 8, 2013


This comment has been minimized.


gettalong commented Sep 29, 2013

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

@gettalong gettalong closed this Sep 29, 2013


This comment has been minimized.

simonvanderveldt commented Nov 14, 2013

@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).


This comment has been minimized.

thierryk commented Dec 14, 2013

@gettalong can you please reconsider this?


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)


This comment has been minimized.


gettalong commented Dec 14, 2013

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

@gettalong gettalong reopened this Dec 14, 2013


This comment has been minimized.

thierryk commented Dec 14, 2013



This comment has been minimized.


gettalong commented Oct 23, 2014

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

@gettalong gettalong closed this Oct 23, 2014

gettalong added a commit that referenced this issue Oct 23, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment