Caddyfile syntax highlighting with Prism

Not sure if this belongs here, but here goes. I wanted syntax highlighting in my Markdown blog, so I used Prism, This doesn’t include highlighting for Caddyfiles so I added a custom definition. Perhaps this will be useful for someone else.

import 'prismjs';
import Prism from 'prismjs';

Prism.languages['caddyfile'] = {
comment: /#.*/,
string: {
pattern: /"(?:\\.|[^"\\])*"|`(?:\\.|[^`\\])*`/,
greedy: true,
},
matcher: {
pattern: /@[A-Za-z0-9_-]+/,
alias: 'function',
},
placeholder: {
pattern: /\{[^{}\s]+}/,
alias: 'variable',
},
address: {
pattern: /(?:localhost|(?:\*\.)?(?:[A-Za-z0-9-]+\.)+[A-Za-z]{2,}|\*:)\S*/,
alias: 'symbol',
},
directive: {
pattern: /\b(?:abort|acme_server|basicauth|bind|encode|error|file_server|forward_auth|handle|handle_errors|handle_path|header|import|log|map|method|metrics|php_fastcgi|redir|request_body|request_header|respond|reverse_proxy|rewrite|root|route|templates|tls|try_files|uri|vars)\b/,
alias: 'keyword',
},
boolean: /\b(?:true|false|on|off)\b/,
number: /\b\d+(?:\.\d+)?\b/,
punctuation: /[{}()[\],]/,
};

Prism.languages['caddy'] = Prism.languages['caddyfile'];

See it in action here: Add syntax highlighting to Markdown - PhotoPaste

1 Like