Ich habe heute ziemlich viel Zeit darin versenkt, mir einen zum dunklen Theme passenden Style für die Syntaxhervorhebung auszusuchen. Nicht zu bunt, aber auch nicht zu kontrastarm. Die Hervorhebung soll unterstützen, nicht ablenken.

Allerdings enthält der Ordner highlight.php/src/Highlight/styles ganze 98 CSS-Dateien, highlight.js/src/styles gar 257! Diese Styles alle einzeln durchzutesten, mir zu notieren, welche der Style (eventuell mit kleinen Anpassungen) in Frage kommen könnten, diese Anpassungen durchzuführen und wieder und wieder zu testen, brachte mich mehrfach an den Rand der Verzweiflung und beinahe zum Aufgeben. Am späten Nachmittag entschied ich mich dann für hopscotch.css aus dem highlight.js-Projekt. Ohne irgendwelche Anpassungen. Ob es dabei bleibt, werden wir sehen. Irgendwie ist es jetzt doch ziemlich bunt …

Nachfolgend ein paar Hervorhebungsbeispiele:

CSS:

.hljs-line-number::before {
    color: #bbb;
    content: counter(line-number);
    display: inline-block;
    text-align: right;
    padding-right: 1.5em;
    width: 1.5em;
    letter-spacing: -1px;
    white-space: nowrap;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Diff:

--- lao 2002-02-21 23:30:39.942229878 -0800
+++ tzu 2002-02-21 23:30:50.442260588 -0800
@@ -1,7 +1,6 @@
-The Way that can be told of is not the eternal Way;
-The name that can be named is not the eternal name.
 The Nameless is the origin of Heaven and Earth;
-The Named is the mother of all things.
+The named is the mother of all things.
+
 Therefore let there always be non-being,
   so we may see their subtlety,
 And let there always be being,
@@ -9,3 +8,6 @@
 The two are the same,
 But after they are produced,
   they have different names.
+They both may be called deep and profound.
+Deeper and more profound,
+The door of all subtleties!

Markdown:

A First Level Header
====================

A Second Level Header
---------------------

Now is the time for all good men to come to
the aid of their country. This is just a
regular paragraph.

The quick brown fox jumped over the lazy
dog's back.

### Header 3

> This is a blockquote.
> 
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote

8086 Assembly (A86-/NASM-Syntax; MS-DOS):

  org 100h

  mov dx, msg
  mov ah, 9
  int 21h

  mov ax, 4c00h
  int 21h

msg:
  db "Hello world!$"

X86 Assembly (NASM-Syntax; Linux):

section .data
msg     db      'Hello world!', 0AH
len     equ     $-msg

section .text
global  _start
_start: mov     edx, len
        mov     ecx, msg
        mov     ebx, 1
        mov     eax, 4
        int     80h

        mov     ebx, 0
        mov     eax, 1
        int     80h

bash:

echo "Hello world!"

C++:

#include <iostream>

int main() {
  std::cout << "Hello world!\n";
}

Delphi:

program ProjectGoodbye;
{$APPTYPE CONSOLE}
begin
  WriteLn('Hello world!');
end.

JavaScript:

document.write("Hello world!");

Lua:

print "Hello world!"

PHP:

<?php
echo "Hello world!\n";
?>

Python:

print "Hello world!"