Cisco Configuration Syntax Highlighting

I wrote a network config management tool and wanted to create my own syntax highlighting for cisco configs. It's pretty easy to create your own highlighter styles using Alex Gorbatchev's SyntaxHighlighter.

You can download my cisco brush here


SyntaxHighlighter.brushes.Cisco = function()
        var interface = 'interface FastEthernet';
        var keywords =  'ip snmp-server tacacs-server ntp line logging'+
                        'boot hostname banner end clock udld power ';
        var security =  'crypto';

        this.regexList = [
                { regex: new RegExp('description.*$', 'gm'),                    css: 'comments' },
                { regex: new RegExp('!.*$', 'gm'),                      css: 'comments' },
                { regex: new RegExp('^( no|no).*$', 'gm'),                      css: 'comments' },
                { regex: new RegExp('^version.*$', 'gm'),                       css: 'color2' },
                { regex: new RegExp('^service.*$', 'gm'),                       css: 'color2' },
                { regex: new RegExp('^aaa.*$', 'gm'),                   css: 'color3' },
                { regex: new RegExp('^interface.*$', 'gm'),                     css: 'color2' },
                { regex: new RegExp('^access-list.*$', 'gm'),                   css: 'color3' },
                { regex: new RegExp('^username.*$', 'gm'),                      css: 'color2' },
                { regex: new RegExp('^enable.*$', 'gm'),                        css: 'color2' },
                { regex: SyntaxHighlighter.regexLib.multiLineCComments,         css: 'comments' },                      // multiline comments
                { regex: SyntaxHighlighter.regexLib.doubleQuotedString,         css: 'string' },                        // strings
                { regex: SyntaxHighlighter.regexLib.singleQuotedString,         css: 'string' },                        // strings
                { regex: /^\s*#.*/gm,                                                                           css: 'preprocessor' },
                { regex: new RegExp(this.getKeywords(keywords), 'gm'),          css: 'color1' },                        // c# keyword
                { regex: new RegExp(this.getKeywords(interface),'gm'),          css: 'color2' },                        // c# keyword
                { regex: new RegExp(this.getKeywords(security), 'gm'),          css: 'color3' }                 // c# keyword


SyntaxHighlighter.brushes.Cisco.prototype       = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Cisco.aliases = ['cisco','network'];

some html file:

   <link rel="stylesheet" type="text/css" href="path_to/shCore.css" />
   <link rel="stylesheet" type="text/css" href="path_to/shThemeDefault.css"/>

   <script type="text/javascript" src="/static/syntax-highlighter/shCore.js"></script>
   <script type="text/javascript" src="/static/syntax-highlighter/shBrushCisco.js"></script>
   <script type="text/javascript">

<pre class="brush: cisco">
  interface GigabitEthernet0/0
   description to corp_lan
   ip address
   ip access-group FW_ACL_GigabitEthernet0/0 in
   no ip redirects
   no ip proxy-arp
   ip flow ingress
   ip nat inside
   ip virtual-reassembly in
   duplex full
   speed 100
   service-policy input GI0/0-COS-IN

Tagged as cisco , highlighting syntax , syntaxhighlighter
Written by Andrew Konkol on July 24th, 2012


Log in with Twitter, Google, Facebook, LinkedIn to leave a comment.