HTML Syntax Highlighting mit prism für 65xx Assembler Listings

http://prismjs.com/ ist ein kompakter Highlighter für diverse Grammatiken (Java, C, INI-Dateien, …). Für Assembler ist nur NASM dabei, für ein Projekt brauchte ich 6502/6510 Assembler. Die Erweiterung ist schnell geschrieben:

1. Download unter http://prismjs.com/index.html von prism.css und prism.js.

2. Neue Datei prism-ca65.js anlegen mit Regex für Syntaxhervorhebung:

// https://github.com/PrismJS/prism/blob/gh-pages/components/   
Prism.languages.ca65 = {
    'comment': /;.*$/m,
    'string': /("|'|`)(\\?.)*?\1/m,
    'label': {
        pattern: /^\s*[\w]*:/,
        alias: 'function'
    },
    'property': {
        pattern: /\.[\w]+/i,
    },
    'function': /\b(?:_printf|pushax)\b/,
    'keyword':
    /\b(?:adc|and|asl|bcc|bcs|beq|bit|bmi|bne|bpl|brk|bvc|bvs|clc|cld|cli|clv|cmp|cpx|cpy|dec|dex|dey|eor|inc|inx|iny|jmp|jsr|lda|ldx|ldy|lsr|nop|ora|pha|php|pla|plp|rol|ror|rti|rts|sbc|sec|sed|sei|sta|stx|sty|tax|tay|tsx|txa|txs|tya)\b/,
    'number': /(\b|-|(?=\$))(0[hx][\da-f]*\.?[\da-f]+(p[+-]?\d+)?|\d[\da-f]+[hx]|\$\d[\da-f]*|0[oq][0-7]+|[0-7]+[oq]|0[by][01]+|[01]+[by]|0[dt]\d+|\d*\.?\d+(\.?e[+-]?\d+)?[dt]?)\b/i,
    'operator': /[\[\]\*+\-\/%<>=&|#\~\^!]/m
};

Das war schon alles. Jetzt Webseite anlegen, CSS einbinden und die zwei JavaScript-Dateien referenzieren:

<html>
<head>
<title>CA65 Assembler-Code farblich hervorgehoben mit prism</title>
    <link href="prism/themes/prism.css" rel="stylesheet" />
</head>
<body>

<pre><code class="language-ca65">
;
; File generated by cc65 v 2.14 - Git d112322
;
.fopt        compiler,"cc65 v 2.14 - Git d112322"
.setcpu        "6502"
.smart        on
.autoimport    on
.case        on
.debuginfo    off
.importzp    sp, sreg, regsave, regbank
.importzp    tmp1, tmp2, tmp3, tmp4, ptr1, ptr2, ptr3, ptr4
.macpack    longbranch
.forceimport    __STARTUP__
.import        _printf
.export        _main

.segment    "RODATA"

L0003:
.byte    $48,$65,$6C,$6C,$6F,$20,$57,$6F,$72,$6C,$64,$00

; ---------------------------------------------------------------
; int __near__ main (void)
; ---------------------------------------------------------------

.segment    "CODE"

.proc    _main: near

.segment    "CODE"

;
; printf("Hello World");
;
lda     #<(L0003)
ldx     #>(L0003)
jsr     pushax
ldy     #$02
jsr     _printf
;
; return 0;
;
ldx     #$00
txa
;
; }
;
rts

.endproc
</code></pre>
<script src="prism/prism.js"></script>
<script src="prism/components/prism-ca65.js"></script>
</body>
</html>

Im Ergebnis sieht das so aus:
image

Es gibt mit https://wordpress.org/plugins/prism/ ein WP-Plugin. Der Schnipsel JS-Code wird einfach an die existierende prism.js aus dem Plugin angehängt, dort hängen auch die anderen Syntaxhighlighter dran.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.