Cisco Syntax for Obsidian

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
!
```

Features

• Highlighting in both views. One grammar drives Reading mode (via Obsidian's bundled Prism) and Live Preview / Source (via a CodeMirror 6 extension), so a block looks the same whether you are editing or reading.
• Cisco-aware tokens. Comments (!), 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.
• Secret recognition. The value in credential-bearing commands (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.
• Theme-aware colors. Colors follow your active theme by default and flip correctly between light and dark. An optional Vibrant palette is tuned specifically for network configs.
• Settings tab. Toggle Live Preview highlighting, bold keywords, and the color scheme.

Supported code-fence tags

Any of these info-strings maps to the Cisco grammar:

cisco, cisco-ios, ios, ios-xe, iosxe, ios-xr, iosxr, nxos, nx-os

Installation

Manual (until listed in the community catalog)

1. Download main.js, manifest.json, and styles.css from the latest release.
2. Create the folder <YourVault>/.obsidian/plugins/cisco-syntax/.
3. Copy the three files into that folder.
4. In Obsidian, open Settings, Community plugins, then enable Cisco Syntax.

From the Community plugins catalog

Once accepted into the Obsidian community catalog, search for "Cisco Syntax" under Settings, Community plugins, Browse.

Settings

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.

How it works

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:

• Reading mode: the grammar is registered into Obsidian's bundled Prism (Prism.languages) under every supported fence tag. Obsidian's markdown renderer then highlights the block for free.
• Live Preview / Source: a CodeMirror 6 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.

Development

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.

Project layout

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.

Roadmap

• FortiGate FortiOS dialect (fortios fence tag).
• Optional folding of interface and router config sections.
• Command-name autocomplete.

Contributions and issue reports are welcome.

License

MIT (c) Blake Bratcher