Create Jekyll hook to add anchors to code block lines

2 files changed, 30 insertions, 1 deletions

diff --git a/_plugins/add-anchor-to-code-block-line-numbers.rb b/_plugins/add-anchor-to-code-block-line-numbers.rb
new file mode 100644
index 0000000..d4cf763
--- /dev/null
+++ b/_plugins/add-anchor-to-code-block-line-numbers.rb
@@ -0,0 +1,20 @@
+PREFIX = '<pre class="lineno">'
+POSTFIX = '</pre>'
+Jekyll::Hooks.register :documents, :post_render do |doc|
+  if doc.output_ext == ".html"
+    code_block_counter = 1
+    doc.output = doc.output.gsub(/<pre class="lineno">[\n0-9]+<\/pre>/) do |match|
+      line_numbers = match
+                      .gsub(/<pre class="lineno">([\n0-9]+)<\/pre>/, '\1')
+                      .split("\n")
+
+      anchored_line_numbers_array = line_numbers.map do |n|
+        id = "B#{code_block_counter}-L#{n}"
+        "<a class=\"code-line-anchor\" id=\"#{id}\" href=\"##{id}\">#{n}</a>"
+      end
+      code_block_counter += 1
+
+      PREFIX + anchored_line_numbers_array.join("\n") + POSTFIX
+    end
+  end
+end
diff --git a/styles.css b/styles.css
index 8f00c9f..5d8ff58 100644
--- a/styles.css
+++ b/styles.css
@@ -81,6 +81,8 @@ section.post-footer, div.footnotes {
 
 /* Code blocks */
 
+/* The "lineno" class is the default generated by Rouge for table-row in code blocks, see:
+   https://github.com/rouge-ruby/rouge */
 pre.lineno {
   margin-right: 3px;
   padding-right: 3px;
@@ -96,7 +98,14 @@ pre.highlight {
 }
 
 
-/* Header anchor icons */
+/* Code block anchors */
+
+a.code-line-anchor {
+  color: black;
+}
+
+
+/* Header anchor */
 
 a.header-anchor {
   color: black;