Downloads

Required Includes for target webpages: SyntaxHighlighterModified.css, clipboard.swf, and shCoreStaticInclude.js
Full Source of this website: Full Source

Introduction

      This is a webform for converting code to syntax highlighted static html via the Syntax Highlighter program from http://code.google.com/p/syntaxhighlighter, by Alex Gorbatchev. The original Syntax Highlighter works dynamically, highlighting the code contained by <pre id="code"> and </pre> tags using javascript when the page is loaded. I modified the code so that this page would generate working static code so that the html only needs to be generated once. Simply set the options, enter the source code into the Source Code input box, and copy and paste the the content of the "Resulting Html Code" input box onto another webpage, making sure to include a link to SyntaxHighlighterModified.css, clipboard.swf, and the shCoreStaticInclude.js script. The generated code and this web form have been tested on Internet Explorer, Firefox, and Opera.
      This modification was written very quickly (especially the web interface) and tested lightly, so if you have comments or wrote a better web interface for me to use (*hint hint*), don't hesitate to email me at j.discar+syntaxhighlighter@gmail.com. This syntax highlighter was written entirely javascript, html, and css, so you can download the source and run it offline. You're obviously free to modify the code in any way, let me know if you do anything useful. Also, please host your own SyntaxHighlighterModified.css, clipboard.swf, and shCoreStaticInclude.js files. Only use mine if you have no way of hosting your own.

Notes

      I think that it's important for me to mention that this static syntax highlighter is essentially a bunch of quick hacks I made to the original code over the course of four evenings after work. Since I did this all really quickly while I was still getting comfortable javascript, it isn't really clean or pretty. It is probably not efficient and it's probably buggy; a lot of my fixes were the first hacks to the original code that popped into my mind. So... Use at your own risk.
      I was really impressed with Syntax Highlighter and decided to use it for my blog. But I figured that if I do the highlighting once myself, it's less strain on the user's computer. I also wanted to add a header to the code as well as change the appearance a little. Since all the javascript is freely available, I made a lot of my own modifications to resolve those issues. It was pretty fun to do and a good javascript exercise. I decided to make my work freely available and let other people use it if they wanted, even if the modifications weren't really made at what I consider a professional level.
      The main change I needed to make were to the code that causes the menu items (view plain, copy to clipboard, etc...) to work correctly. I added a new textarea containing the original source code to the dp-highlighter div to make that work. I did a lot of other fixes (added a boolean blogger mode, moved css styles, added a header) that made a lot of sense at the time.
      Feel free to read what I've done and try to follow it, but I would suggest just using the program as is. Try not to make any changes more complicated than adding a brush or changing some styles. If you really want to make your own modifications, I would suggest starting with the original Syntax Highlighter code. If I had more time (like a month...) I'd have written a good open source code to static html syntax highlighter... but... I think I spent too much time on this project as it is.

General Usage

      1. You can download the source and open index.html on your own machine offline, or go to http://syntaxhighlighter.relic19.net. Either way, you should make sure you are hosting the SyntaxHighlighterModified.css, clipboard.swf, and shCoreStaticInclude.js files somewhere. Only use the versions I'm hosting if you have no other options, especially since you'll probably want to modify the files.
      2. Modify the SyntaxHighlighterModified.css as neccessary. Edit the final two lines in shCoreStaticInclude.js as necessary.
shCoreStaticInclude.js
view plaincopy to clipboardprint?
  1. dp.SyntaxHighlighter.ClipboardSwf = '[Path To]/clipboard.swf';  
  2. dp.SyntaxHighlighter.BloggerMode(true);  
For the copy to clipboard command to work, ClipboardSwf must point to the correct file. Blogger mode must be set to true for view plain and copy to clipboard to display correctly if your code is being pasted into blogger.
      3. Complete the input area on index.html. Feel free to play with the options. Press the convert source button and copy the text in the Result box. You can see a preview of how the code will look in the Preview area.
      4. Add the copied code to your page, making sure to include a link to your SyntaxHighlighterModified.css and the shCoreStaticInclude.js script. The following html code provides an example of displaying static html code for the javascript "alert("Hello World!");"
sample.html
view plaincopy to clipboardprint?
  1. <head>  
  2.   <head>  
  3.     <link type="text/css" rel="stylesheet" href="[Path To]/SyntaxHighlighterModified.css"></link>  
  4.   </head>  
  5.   <body>  
  6.     <script language="javascript" src="[Path To]/shCoreStaticInclude.js"></script>  
  7.   
  8.     <!-- Copy and Pasted Syntax Highlighted code... but nicely formatted it's usually one line -->  
  9.     <div class="dp-highlighter">  
  10.       <div class="bar">  
  11.         <div class="tools">  
  12.           <div class="header">helloWorld.js</div>  
  13.           <a href="#" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a>  
  14.           <a href="#" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy to clipboard</a>  
  15.           <a href="#" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a>  
  16.           <a href="#" onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>  
  17.         </div>  
  18.       </div>  
  19.       <ol class="dp-c" start="1">  
  20.         <li class="alt">  
  21.           <span>  
  22.             <span>alert(</span>  
  23.             <span class="string">"Hello&nbsp;World!"</span>  
  24.             <span>);&nbsp;&nbsp;</span>  
  25.           </span>  
  26.         </li>  
  27.       </ol>  
  28.       <textarea style="display: none;" class="originalCode">alert("Hello World!");</textarea>  
  29.     </div>  
  30.     <!-- End copy an pasted code -->  
  31.   
  32.   </body>  
  33. </html>  

Add a New Brush

      Due to the quick and dirty writing of my modifications, it isn't really that easy to add a new brush. If you're not familiar with Syntax Highlighter, brushes are the definitions for new languages. This section will go over adding a new brush for yourself.
      1. Obtain or Write a new brush javascript file.
      2. Copy the new brush's style to your css file.
      3. Add the new brush to index.html.
      4. Add the option to the drop down box.

Links

My Blog Post on Code to Html syntax highlighters
Introless Version of the Webform
Very Light and Spartan Version of the Webform.
The Syntax Highlighter Project
Back To Main