Web Browser Syntax Highlighting

From Syslinux Wiki
Revision as of 14:16, 16 August 2014 by Ady (talk | contribs) (Typos. Update and correct link.)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Web Browser Syntax Highlighting adds color coded syntax highlighting to the configuration file when it is viewed in a browser. This is accomplished by adding 5 comments before an existing configuration and 1 comment after it. Together these comments add HTML and JavaScript which will provide compatibility with web based viewing without effecting functionality. Because these changes are comments, Syslinux will ignore them and the configuration file will still be functional. The following article is based on this mailing list post.

Adding Web Browser Syntax Highlighting

There are two ways to add syntax highlighting. If you have internet access you can copy and paste the lines below which point to the http://pileus.tinflower.com server, no modification needed. This will download the javascript and css from the internet each time you view the file. If you want or need to host those files locally you can download SyntaxHighlighter then add the shBrushSyslinux.js brush file to the 'scripts' subfolder. Add the lines below and adjust the 4 URLs to match your hosting location.

 # <html><head><script type="text/javascript" src="http://pileus.TinFlower.com/webroot/syntaxhighlighter/scripts/shCore.js"></script>
 # <script type="text/javascript" src="http://pileus.TinFlower.com/webroot/syntaxhighlighter/scripts/shBrushSyslinux.js"></script>
 # <link href="http://pileus.TinFlower.com/webroot/syntaxhighlighter/styles/shCoreFadeToGrey.css" rel="stylesheet" type="text/css" />
 # <link href="http://pileus.TinFlower.com/webroot/syntaxhighlighter/styles/shThemeFadeToGrey.css" rel="stylesheet" type="text/css" />
 # </head><body><pre class="brush: syslinux;">

...Normal Syslinux configuration here...

 # </pre><script type="text/javascript">SyntaxHighlighter.all();</script></body></html>

How it Works

The top four comments are a basic HTML <head></head> section. These load the open source SyntaxHighlighter from the server. The fifth comment starts a HTML <body> and opens a <pre tag. This tells the browser that the rest of the configuration is formatted plain text. This prevents the browser from wrapping lines and otherwise destroying the formatting of the file and alto tells the highlighter what language to to look for when performing highlights.

The last line tells SyntaxHighlighter to actually do the highlighting and closes the <pre>, <body>, and the <HTML> tags.