Skip to content
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

Closed
Quintus opened this issue Sep 2, 2013 · 6 comments
Closed

Styling hardcoded <div> around CodeRay code table #76

Quintus opened this issue Sep 2, 2013 · 6 comments
Assignees

Comments

@Quintus
Copy link

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

@ghost ghost assigned gettalong Sep 8, 2013
@gettalong
Copy link
Owner

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

@simonvanderveldt
Copy link

@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
Copy link

@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
Copy link
Owner

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
@thierryk
Copy link

👏

@gettalong
Copy link
Owner

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

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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants