DownloadsRequired Includes for target webpages: SyntaxHighlighterModified.css, clipboard.swf, and shCoreStaticInclude.js
Full Source of this website: Full Source
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 Usage1. 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.
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.
- dp.SyntaxHighlighter.ClipboardSwf = '[Path To]/clipboard.swf';
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.
- <link type="text/css" rel="stylesheet" href="[Path To]/SyntaxHighlighterModified.css"></link>
- <!-- Copy and Pasted Syntax Highlighted code... but nicely formatted it's usually one line -->
- <div class="dp-highlighter">
- <div class="bar">
- <div class="tools">
- <div class="header">helloWorld.js</div>
- <a href="#" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a>
- <a href="#" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy to clipboard</a>
- <a href="#" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a>
- <a href="#" onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
- <ol class="dp-c" start="1">
- <li class="alt">
- <span class="string">"Hello World!"</span>
- <span>); </span>
- <textarea style="display: none;" class="originalCode">alert("Hello World!");</textarea>
- <!-- End copy an pasted code -->
Add a New BrushDue 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.
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.
LinksMy 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