Blake Bratcher80 downloadsSyntax highlighting for Cisco IOS, IOS-XE, IOS-XR and NX-OS configuration in fenced code blocks, in both Reading mode and Live Preview.
Syntax highlighting for Cisco network configuration inside Obsidian code blocks. Write a fenced code block tagged cisco and your IOS, IOS-XE, IOS-XR, and NX-OS configs get colorized in both Reading mode and Live Preview.
```cisco
!
hostname CORE-SW-01
!
enable secret 9 $9$rZtU.abcDEF/012345
!
interface GigabitEthernet0/1
description Uplink to DIST-01
switchport mode trunk
switchport trunk allowed vlan 10,20,30
no shutdown
!
ip route 0.0.0.0 0.0.0.0 203.0.113.1
router ospf 10
network 10.0.0.0 0.0.0.255 area 0
!
```
!), the no / default negation prefix, command keywords, routing and L2/L3 protocols, interface names (full and abbreviated), IPv4 and IPv6 addresses with CIDR, MAC addresses, quoted strings, and numbers are all recognized.password, enable secret, username ... secret, snmp-server community, pre-shared keys, key-strings, RADIUS/TACACS and NTP keys) is tokenized as a secret so it stands out in a config. Recognition is heuristic and colors the value only; it does not hide or encrypt it.Any of these info-strings maps to the Cisco grammar:
cisco, cisco-ios, ios, ios-xe, iosxe, ios-xr, iosxr, nxos, nx-os
main.js, manifest.json, and styles.css from the latest release.<YourVault>/.obsidian/plugins/cisco-syntax/.Once accepted into the Obsidian community catalog, search for "Cisco Syntax" under Settings, Community plugins, Browse.
| Setting | Default | Effect |
|---|---|---|
| Highlight in Live Preview | On | Highlight blocks while editing (Reading mode is always highlighted). |
| Color scheme | Theme colors | Follow the theme, or use the fixed Vibrant palette. |
| Bold keywords | On | Render command keywords in bold. |
The plugin defines a single Prism grammar (src/cisco-grammar.ts) built from shared regexes and keyword lists (src/cisco-tokens.ts). That one grammar is used two ways:
Prism.languages) under every supported fence tag. Obsidian's markdown renderer then highlights the block for free.ViewPlugin (src/cisco-editor-extension.ts) walks the editor's syntax tree, finds fenced blocks whose info-string is one of ours, tokenizes the body with the same grammar via Prism.tokenize, and paints the tokens with mark decorations that carry the same CSS classes.Using one grammar for both paths keeps the two views perfectly in sync.
Prerequisites: Node.js 20+ and npm.
npm install # install dev dependencies
npm run dev # bundle src/main.ts -> main.js and watch for changes
npm run build # type-check, then produce a minified production main.js
npm run lint # ESLint with the official Obsidian plugin rules
For a fast edit/reload loop, clone this repo directly into a test vault at <Vault>/.obsidian/plugins/cisco-syntax/ and install the Hot Reload plugin.
| Path | Purpose |
|---|---|
src/main.ts |
Plugin entry: loads Prism, registers the grammar and editor extension, wires settings. |
src/cisco-tokens.ts |
Shared regexes and keyword groups (the single source of truth). |
src/cisco-grammar.ts |
The Prism grammar object assembled from those tokens. |
src/prism-spans.ts |
Flattens a Prism token stream into CodeMirror offset spans. |
src/cisco-editor-extension.ts |
CodeMirror 6 ViewPlugin for Live Preview highlighting. |
src/reading-processor.ts |
Reading-mode post-processor: tags Cisco blocks so the stylesheet can scope colors. |
src/settings.ts |
Settings interface and settings tab. |
styles.css |
Theme-aware and Vibrant token colors for both views. |
fortios fence tag).interface and router config sections.Contributions and issue reports are welcome.
MIT (c) Blake Bratcher