Wie integriert man Zeilennummern in die Code-Blöcke, die von Rouge verarbeitet werden?

Melden

Die Integration von Zeilennummern in Rouge hängt davon ab, wie du Rouge verwendest (direkt in Ruby, über Jekyll oder einen anderen Static Site Generator). Rouge selbst bietet dafür spezielle Formatter.

Hier sind die gängigsten Methoden:

1. Verwendung in Ruby (direkt über die API)

Wenn du Rouge in deinem eigenen Ruby-Code verwendest, musst du den HTMLTable-Formatter (oder HTMLPygments) nutzen. Der Standard-HTML-Formatter unterstützt keine Zeilennummern.

require 'rouge'

source = 'puts "Hello World"'
lexer = Rouge::Lexers::Ruby.new
formatter = Rouge::Formatters::HTML.new

# Um Zeilennummern hinzuzufügen, umschließe den Formatter mit HTMLTable
table_formatter = Rouge::Formatters::HTMLTable.new(formatter, opts = {
  column: 'num',      # Name der Spalte
  line_class: 'line', # CSS-Klasse für die Zeile
  table_class: 'rouge-table'
})

puts table_formatter.format(lexer.lex(source))

2. Integration in Jekyll

In Jekyll ist Rouge der Standard-Highlighter. Du kannst Zeilennummern auf zwei Arten aktivieren:

A) Global für alle Code-Blöcke

Füge dies in deine _config.yml ein:

kramdown:
  syntax_highlighter_opts:
    block:
      line_numbers: true

B) Individuell pro Code-Block

Wenn du den highlight-Tag von Liquid verwendest, kannst du das Attribut linenos hinzufügen:

{% highlight ruby linenos %}
def hello
  puts "world"
end
{% endhighlight %}

3. Integration in Middleman

In der config.rb kannst du die Optionen für den Renderer (z.B. Redcarpet oder Kramdown) anpassen:

# Falls du Kramdown nutzt:
set :markdown, 
    fenced_code_blocks: true, 
    smartypants: true, 
    syntax_highlighter_opts: { line_numbers: true }

4. CSS-Styling (Wichtig!)

Rouge generiert meist eine Tabelle, bei der die Zeilennummern in einer eigenen Spalte stehen. Damit das gut aussieht, benötigst du passendes CSS. Hier ist ein einfaches Beispiel:

/* Container der Tabelle */
.rouge-table {
  border-collapse: collapse;
  width: 100%;
}

/* Die Spalte mit den Zeilennummern */
.rouge-table .linenos {
  user-select: none; /* Verhindert das Mitkopieren der Nummern */
  text-align: right;
  padding-right: 10px;
  color: #888;
  width: 1%; /* So schmal wie möglich */
  border-right: 1px solid #ddd;
}

/* Die Spalte mit dem Code */
.rouge-table .code {
  padding-left: 10px;
}

Zusammenfassung der Formatter-Optionen

  • Rouge::Formatters::HTMLTable: Erstellt eine HTML-Tabelle. Das ist die sauberste Methode, da Zeilennummern beim Kopieren des Codes oft nicht mitmarkiert werden.
  • Rouge::Formatters::HTMLPygments: Erzeugt eine Ausgabe, die dem alten Python-Highlighter "Pygments" ähnelt (gut für bestehende Themes).
  • line_numbers: true: Die Standardoption in den meisten Config-Dateien für Markdown-Parser, die Rouge nutzen.

Hinweis: Wenn du Standard-Markdown-Zäune (``ruby) verwendest, unterstützen viele Generatoren wie Jekyll keine direkten Inline-Optionen für Zeilennummern. In diesem Fall musst du die globale Konfiguration in der_config.yml` wählen.

0