alexwlchan / alexwlchan.net

Source code and plugins for my website, a static site built with Jekyll
https://alexwlchan.net/
MIT License
42 stars 12 forks source link

Fix code blocks with line numbers #833

Open alexwlchan opened 4 months ago

alexwlchan commented 4 months ago

Currently this doesn't work – it's getting mangled somewhere in the compress plugin.

I did start writing a fix for this, but I never finished it: here's the plugin I partially finished.

@@ -0,0 +1,67 @@
# frozen_string_literal: true

# See https://github.com/jekyll/jekyll/issues/4432
# See https://github.com/hydecorp/hydejack/issues/20#issuecomment-309371925

# This hook allows me to use linenos with my code highlighter plugin, e.g.
#
#       {% highlight python linenos %}
#       def greeting():
#           print("Hello world!")
#       {% endhighlight %}

# <style>
#   .rouge-table {
#     border-collapse: collapse;
#     max-width: 100%;
#     overflow-x: auto;
#   }
#
#   .rouge-table td {
#     padding: 0;
#   }
#
#   .rouge-table pre.lineno {
#     width: 25px;
#     margin-top: 0;
#     margin-bottom: 0;
#     text-align: right;
#     border-right: 0;
#     border-top-right-radius: 0;
#     border-bottom-right-radius: 0;
#     margin-right: 0;
#     padding-right: 0;
#   }
#
#   .rouge-table td.code pre {
#     width: 300px;
#     overflow-x: clip;
#     margin-top: 0;
#     margin-bottom: 0;
#     border-left: 0;
#     border-top-left-radius: 0;
#     border-bottom-left-radius: 0;
#     margin-left: 0;
#   }
# </style>

# <figure class="highlight">
#   <pre>
#     <code class="language-swift" data-lang="swift">
#       <table class="rouge-table"><tbody><tr>
#         <td class="gutter gl"><pre class="lineno">1 … 31</pre></td>
#         <td class="code"><pre><span class="cp">…</pre></td>
#       </tr></tbody></table>
#     </code>
#   </pre>
# </figure>

# Jekyll::Hooks.register :posts, :post_convert do |post|
#   # post.content = post.content.gsub('<figure class="highlight"><pre><code ', '<div ').gsub('</table></code></pre></figure>', '</div>')
#   post.content = post.content
#     .gsub('<figure class="highlight"><pre><code ', '<div ')
#     .gsub('</code></pre></figure>', '</div>')
#     .gsub('<td class="gutter gl"><pre class="lineno">', '<td class="gutter gl"><pre class="lineno"><code>')
#     .gsub('</pre></td><td class="code"><pre>', '</code></pre></td><td class="code"><pre><code>')
#     .gsub('</pre></td></tr></tbody></table>', '</code></pre></td></tr></tbody></table>')
# end