marek/buchwerk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Textdiagramme, Ausgabeblöcke und GDScript-Hervorhebung

Browse Source 
Stilregel: Strukturdiagramme als diagramm-Block mit Kästen und Pfeilen,
Ausgabe des Testlaufs unter jedem Beispiel; Prüfer prüft beides.
Frontend: eigene GDScript-Grammatik, gdshader über GLSL, Diagrammblock
ohne Umbruch. PDF: Diagramme als pre ohne Umbruch, gdshader über GLSL.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
team3
2026-10-05 16:05:17 +02:00
parent 2e31835ff4
commit 5bdf661f58
5 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/markdown.js
View File

@@ -25,13 +25,33 @@ for (const [n, l] of Object.entries({ python, php, javascript, typescript, json,
hljs.registerAliases(['js'], { languageName: 'javascript' }); hljs.registerAliases(['ts'], { languageName: 'typescript' })
hljs.registerAliases(['sh', 'shell', 'console', 'zsh'], { languageName: 'bash' }); hljs.registerAliases(['html', 'svg', 'tscn', 'tres'], { languageName: 'xml' })
hljs.registerAliases(['yml'], { languageName: 'yaml' }); hljs.registerAliases(['toml', 'cfg', 'godot'], { languageName: 'ini' }); hljs.registerAliases(['cs'], { languageName: 'csharp' })
hljs.registerAliases(['gdscript', 'gd'], { languageName: 'python' }) // nah genug für lesbare Farben
// GDScript hat highlight.js nicht an Bord – kleine eigene Grammatik (Schlüsselwörter, @Annotationen, $Pfade, Strings, Kommentare).
hljs.registerLanguage('gdscript', (h) => ({
name: 'GDScript', aliases: ['gd'],
keywords: {
keyword: 'func var const static extends class_name class signal enum if elif else for while match when break continue pass return await yield in is as not and or super self void breakpoint assert preload',
literal: 'true false null PI TAU INF NAN',
built_in: 'int float bool String StringName NodePath Vector2 Vector2i Vector3 Vector3i Vector4 Color Rect2 Transform2D Transform3D Basis Quaternion Array Dictionary Callable Signal Variant PackedStringArray PackedInt32Array PackedFloat32Array PackedVector2Array PackedVector3Array PackedByteArray print printerr push_error push_warning randf randi randi_range randf_range lerp lerpf clamp clampf abs sign floor ceil round sqrt pow min max minf maxf deg_to_rad rad_to_deg range len str load get_node is_instance_valid',
},
contains: [
h.HASH_COMMENT_MODE,
{ className: 'string', variants: [{ begin: /"""/, end: /"""/ }, { begin: /"/, end: /"/, illegal: /\n/, contains: [h.BACKSLASH_ESCAPE] }, { begin: /'/, end: /'/, illegal: /\n/, contains: [h.BACKSLASH_ESCAPE] }, { begin: /\^"/, end: /"/ }, { begin: /&"/, end: /"/ }] },
{ className: 'meta', begin: /@[A-Za-z_]\w*/ },
{ className: 'symbol', begin: /\$[A-Za-z_][\w\/%]*|%[A-Za-z_]\w*/ },
{ className: 'number', begin: /\b0x[0-9a-fA-F_]+|\b0b[01_]+|\b\d[\d_]*(\.\d[\d_]*)?([eE][+-]?\d+)?\b/ },
{ className: 'title.function', begin: /(?<=\bfunc\s+)[A-Za-z_]\w*/ },
{ className: 'title.class', begin: /(?<=\b(?:class_name|extends|class)\s+)[A-Za-z_]\w*/ },
],
}))
hljs.registerAliases(['gdshader'], { languageName: 'glsl' })
const md = new MarkdownIt({
html: true,
linkify: false,
typographer: false,
highlight(code, lang) {
// Textdiagramme (Kästen und Pfeile) bleiben unformatiert und werden nie umgebrochen.
if (lang === 'diagramm') return `<pre class="diagramm"><code>${md.utils.escapeHtml(code)}</code></pre>`
const l = lang && hljs.getLanguage(lang) ? lang : null
const out = l ? hljs.highlight(code, { language: l }).value : md.utils.escapeHtml(code)
return `<pre class="hljs"><code>${out}</code></pre>`

1
frontend/src/style.css
View File

@@ -159,6 +159,7 @@ a.knopf { display: inline-block; text-decoration: none; line-height: normal; }
.buch p, .buch li { overflow-wrap: anywhere; }
.buch pre { background: var(--code-bg); color: var(--code-fg); padding: 12px 14px; border-radius: 8px; font-size: 0.86em; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; hyphens: manual; }
.buch pre code { background: none; padding: 0; }
.buch pre.diagramm, .lm-screen pre.diagramm { white-space: pre; overflow-x: auto; font-size: 0.8em; line-height: 1.2; }
.buch table { border-collapse: collapse; margin: 0 0 1em; font-size: 0.92em; display: block; max-width: 100%; overflow-x: auto; hyphens: manual; }
.buch th, .buch td { border: 1px solid var(--lese-rand); padding: 4px 9px; text-align: left; }
.buch .hinweis { background: var(--karte); border-radius: 6px; padding: 8px 12px; font-size: 0.85rem; color: var(--dim); font-family: system-ui, sans-serif; margin: 0 0 14px; }