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

shBrushCisco.js

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
                ];

        this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags);
};

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

some html file:

<head>
   <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">
      SyntaxHighlighter.all()
   </script>
</head>

<body>
<pre class="brush: cisco">
  interface GigabitEthernet0/0
   description to corp_lan
   ip address 192.168.1.10 255.255.0.0
   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
</pre>
</body>

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

0 Comments

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