Code Viewer
Kl 20:58 av Familjen Carlström i CodeViewer, WordPress currently 11,973 views Updated: 23 Jul, 2008The original version is developed by Aaron Schaefer (http://elasticdog.com/) and AJ (http://flash.terra.ee/?p=11). This version is slighly modified by me to be usable with a WUSIWUG-editor.
Code Viewer is a WordPress plugin that pulls source code from an external file and displays it, optionally adding a link to download the code directly. The plugin displays the code with proper indentation, line numbers, and automatic long-line wrapping. The plugin also works well with a WYSIWYG-editor and has GeSHi-support.
When using Code Viewer, you no longer have to worry about typing countless entity references in order to make your code “HTML friendly” or to simulate tabs…it’s all done automatically with PHP and a little CSS. By inserting line numbers on your page, the plugin also eliminates the problem of long, non-breaking lines screwing up your layout. In addition, line numbers make convenient reference points when discussing code samples.
Last, but not least…because you’re pulling the source code from an external file (rather than having it embedded directly in your entry), the same code can be repeated on numerous pages, and you only have to type it in once. This not only saves you time, but when you update the code in the centralized file, all instances of that code will be updated along with it.
Installation
- Download Code Viewer v1.4.4 (MD5 Sum: 0e667da2c95ab3ebbca60d808f54e9b3
- Extract the contents in the rar-file.
- Upload the codeviewer-directory into your wp-content/plugins/ directory.
- Activate the plugin on your WP Admin » Plugin Management page by clicking the corresponding “Activate” link under the Action column.
- Goto WP Admin » Options » Codeviewer and edit the default paths.
- You’ll also want to change some of the classes in the CSS that will control the look of the code listing. Everything (with the exception of auto-indention) works just fine without the CSS; but adding it in makes a huge difference on readability. Feel free to change these values to whatever you like, but futher down you see how I have mine set up.
- If you want to use GeSHi-highlighting download the latest GeSHi-class at http://qbnz.com/highlighter/ (2008-07-22: 1.07.22 is latest version). Extract the contents in the zip-file. Upload the geshi-directory into your wp-content/plugins/ directory.
MD5 Sum (http://www.download.com/WinMD5Sum/3000-2381_4-10115915.html) let you check that no manipulation is done to the file.
Usage
Code Viewer basically searches your entry for a custom tag named [viewcode ] [/viewcode], that tells the server to look at an external file and parse it line-by-line into an ordered list. It can be placed anywhere a block-level tag is valid but the tag must be properly closed.
Note that there should not be a white space character after viewcode and before ]. I have problems to show this tag correctly into this post without showing everything as code!
To better illustrate its usage, the tag used in this entry (to show the codeviewer.css listing above) was:[viewcode ] src=codeviewer.css geshi=css[/viewcode]
/***************************************
* This file shall be put into the directory* wp-content/plugins/code-viewer* Created by Håkan Carlström* www.familjencarlstrom.se***************************************/ol.codelist{border:1px solid #303130;background-color:#FEFEFE;font-size:13px;font-family:'Courier New',Courier,monospace;}ol.codelist li.even{background-color: #aebbc6;}ol.codelist li.odd{}ol.codelist li.tab0 { padding-left: 2px; }ol.codelist li.tab1 { padding-left: 26px; }ol.codelist li.tab2 { padding-left: 50px; }ol.codelist li.tab3 { padding-left: 74px; }ol.codelist li.tab4 { padding-left: 98px; }ol.codelist li.tab5 { padding-left: 122px; }ol.codelist li.tab6 { padding-left: 146px; }ol.codelist li.tab7 { padding-left: 170px; }ol.codelist li code { color: 222; }ol.codelist div {margin: 0;padding: 1px 2px;}ol.codelist div.tab0 { padding-left: 2px; }ol.codelist div.tab1 { padding-left: 26px; }ol.codelist div.tab2 { padding-left: 50px; }ol.codelist div.tab3 { padding-left: 74px; }ol.codelist div.tab4 { padding-left: 98px; }ol.codelist div.tab5 { padding-left: 122px; }ol.codelist div.tab6 { padding-left: 146px; }ol.codelist div.tab7 { padding-left: 170px; }ol.codelist li.sourcelink {color: 000;font: 115% Georgia, "Times New Roman", Times, serif;list-style: none;margin-left: -32px;padding-top: .85em;text-align: center;}ol.warning{}
This CSS-file is included in the above rar-file of CodeViewer.
Parameters
[viewcode ] src="URL" link=display lines=visible scroll=display scrollheight=height showsyntax=display geshi=language[/viewcode]
- The
URLattribute is required.- "URL" - string - The URL of the code to display. Note that relative paths are in relation to the $default_path variable set during the installation step.
- The
linkattribute is optional.- display - string - Should the link to the code be displayed (
yes), or not be displayed (no). If thelinkattribute is left out of the tag completely, the value defaults tono.
- display - string - Should the link to the code be displayed (
- The
linesattribute is optional.- visible - string - Which linenumbers shall be visible in the output. Use , and - to separate linenumbers. Example 1,3-5,10-12,16-18,22.
- The
scrollattribute is optional.- display - string - Should the scrollbar be displayed (
yes), or not be displayed (no). If thescrollattribute is left out of the tag completely, the value defaults tono.
- display - string - Should the scrollbar be displayed (
- The
scrollheightattribute is optional.- height- string - Height of the scrollbar. In px (pixels). Defaults to '100 px'(pixels).
- The
showsyntaxattribute is optional.- display - string - Should the syntax used of [viewcode ] be displayed (
yes), or not be displayed (no). If theshowsyntaxattribute is left out of the tag completely, the value defaults to no.
- display - string - Should the syntax used of [viewcode ] be displayed (
- The
geshiattribute is optional.- language - string - Highlighting of code in "language" using GeSHi. Supported language codes: Look at http://qbnz.com/highlighter/.
All attribute values can be surrounded with double quotes (") or single quotes(').
Examples
Here are some examples of valid syntax recognized by Code Viewer.
Note that all of these examples point to the same file (assuming the $default_path variable is set to "http://www.familjencarlstrom.se/WordPress/Mods/"):
[viewcode ] src=http://www.familjencarlstrom.se/WordPress/Mods/codeviewer/codeviewer.css link=yes[/viewcode]
[viewcode ] src="http://www.familjencarlstrom.se/WordPress/Mods/codeviewer/codeviewer.css"[/viewcode]
[viewcode ] src="codeviewer/codeviewer.css" lines=1-30 scroll=yes scrollheight=200px [/viewcode]
[viewcode ] src="codeviewer/codeviewer.css" lines=1-5,10-15 showsyntax=no [/viewcode]
[viewcode ] src=codeviewer/codeviewer.css[/viewcode]
[viewcode ] src=codeviewer/codeviewer.css geshi=css[/viewcode]
The above examples is verified working 2007-07-17. Make sure the WYSIWYG-editor dont add links (which is the usual) to the http://-argument when using absolute path.
Version History
- v1.4.4 (21 april 2008) - Changed default showsyntax to no.
- v1.4.3 (18 Juli 2007) - Added GeSHI-highligtning by using attribute geshi="language".
- v1.4.2 (17 Juli 2007) - Added the same support as Codeviewer 1.3 which means that there is no requirement of correct ordering. You can also use single quotes and the scrollheight-attribute has been corrected.
- v1.4.1 (8 Juli 2007) - Added Option Page at Admin page with Default Path and Plugin Path(instead of editing in file) and localization.
- v1.4 (16 Aug 2006) - Usable with a WYSIWUG-editor.
By others
- v1.3 (5 Jul 2005) - AJ added scroll and scroll_height.
- v1.2 (4 Jul 2005) - AJ added "lines" to input string.
- v1.1 (10 Oct 2004) - Fixed blank line detection; no longer confused by whitespace characters.
- v1.01 (30 Sep 2004) - Update to code-viewer.css; fixed inconsistent font sizing.
- v1.0 (26 Sep 2004) - Initial release to the public.
Credits
The original version is developed by Aaron Schaefer (http://elasticdog.com/) and AJ (http://flash.terra.ee/?p=11). This version is slighly modified by me to be usable with a WUSIWUG-editor.
License
Code Viewer is licensed under the GPL v2.
I have a quick question. I installed your plugin and edited the code-viewer.php as per your instructions, but something isn't working. I changed the $default_path variable to '/freecode/', I left the $plugin_path variable alone, since it already points to my plugin folder. I put a test file called Foo.txt into my code folder and created a test post using this tag: [viewcode] src=Foo.txt[/viewcode]. I tried several variations within the 'src' string but I always get an error message back that says: [The requested file http://www.codegator.com/freecode/ src=Foo.txt could not be found] I can bring the Foo.txt file up in my browser, so I know it's there. I'm probably doing something wrong but I just don't see it – any ideas? Thanks.
Try downloading the lastest version (Now: 1.4.3) and try the code again. Make a comment if it doesn’t work.
/Håkan C
Tried install your plugin for for an hour or so, I am pretty sure I followed your instructions correctly, but unable to get it working. I got this:
[The requested file src=”http://fsfoundry.org/codefreak/code/hello.cpp” link=”yes” could not be found]
I had Aaron’s original plugin installed before I tried yours, it worked fine but without your mods which I thought would be really nice to have.
Any help would be appreciated.
Don’t use " before and after yes in the link-syntax. At the moment I only accept one parameter with " (one of the problems with a WYSIWYG-editor).No problems in version 1.4.2 and above.Try downloading the lastest version. Hopefully the problems that you experienced is gone.
Yours
Håkan C
Are you sure the current version of the plugin is linked in the download? In the sourcecode it still says 1.3. Also, the syntax is different, the regexp doesn't match the "src=", and the bit that matches the actual source location matches (.*) which also grabs the closing quotation mark. In short, I can't get the version for download to work at all…
Try to download again. The version-numbering is updated and the uploaded version works!
/Håkan
Are comments turned off? I can't seem to post anything?
Every comment got stuck with Akismet and it took a while before I saw this.
Hopefully OK now.
Håkan C
Ok, I don't know whats going on. None of the above examples of using this script worked, until I used it like this [viewcode ]filename.txt[/viewcode]. I was pulling my hair for two hours with this, hope this will help someone. enjoy
The code-viewer is
a little bit sensitive in 1.4.not so sensitive in 1.4.2.* You got to have a space between [..code] and src.
* You can only have " " on the src-argument, not like code-viewer1.3 on the other arguments.Not needed in 1.4.2* Make sure your editor don’t add links (which is usual) to the http://-argument.
Also read the updated examples on the post-page.
Yours
Håkan
[...] Plugins Page | Download [...]
[...] CodeViewer pulls source code from an external file and displays it, optionally adding a link to download the code directly. [...]
[...] Plugins CodeViewer pulls source code from an external file and displays it, optionally adding a link to download the [...]
[...] Visit [...]
[...] CodeViewer pulls source code from an external file and displays it, optionally adding a link to download the code directly. [...]
hi familjen and all: this looks wonderful , cant wait to have a go at it. alto
Hi – I have installed this plugin along with GeSHi and it’s working brilliantly… excerpt one majoy shortfall… WordPress is still rendering single quotes and double quotes as curly quotes, even though in the text file they are not.Is there a solution to this? Thanks
Do I understand you right when you mean "curly quote" you mean the double curved quote (HTML “ and ”)?
And its inside the [viewcode]……[/viewcode] statement you use it? Not in the code as the WordPress problems with curly quotes?
See http://wordpress.org/support/topic/112695 and http://wordpress.org/support/topic/125038
/Håkan C
[...] kod renklendirici Word press iin http://www.familjencarlstrom.se/Word…7/code-viewer/ Bu adresteki Code Viewer’ kurdum, geshi ile beraber alyor imdilik bir sorun kartmad. [...]
Thanks for your response. Just to clarify, this is what is happening. 1) I upload some code in a text file which includes straight single and double quote marks.2) I display that code using your plugin – works great!3) When WordPress renders the code in the text file, it converts the straight quotes to curly quotes, which kind of makes it pointless because people cant copy and paste and use this code. I have found a solution in Alex Kings plugin which allows to disable WordPresses ‘smart’ quotes on a post y post basis, but it is slightly fiddly. Maybe a feature request is for your plugin to achieve the same automatically for everything within the [viewcode] tags?
[...] Hakan Carlstrom’s Codeviewer is different in that it grabs the code from an external text file, so WordPress can’t have its wicked way and change characters and mess up your code. Codeviewer also displays the code with line numbers and automatically wraps long non-breaking lines. [...]
[...] Hakan Carlstrom’s Codeviewer is different in that it grabs the code from an external text file, so WordPress can’t have its wicked way and change characters and mess up your code. Codeviewer also displays the code with line numbers and automatically wraps long non-breaking lines. [...]
I tested your plugin and is really nice. This Help me a lot with my blog! Thank You!
[...] (These instructions basically parallel those for CodeViewer 1.4) [...]
[...] there are a few code highlighters out there that you can use, and I have chosen to use CodeViewer, which lets me upload files of code that then get converted into a nice highlighted form. From [...]
I’d like to suggest that you make the default value for showsyntax no. I would guess that 99% of users, 99% of the time, will not want to display the syntax, so with the default set at yes, it’s just one more parameter that has to be passed with every usage.Other than that, I’m loving it, thanks!
The default value of showsyntax is now no (v1.4.4)
[...] the mean time, you can find the most up to date version of Code Viewer at Håkan’s site. Happy [...]
This is a great plugin. It is going to help me so much. Thanks a lot!
Just one more comment. How do you turn on the auto indenting? Thanks
The Auto indenting function lies in the codeviewer.css document. If you follow the instructions you have a codeviewer folder with both the codeviewer.php and codeviewer.css files inside it.
I’m with Andy…how do I get indenting turned on? I’m getting my geshi syntax highlighting on python source code, but no indentions. Great plugin. Thanks.
Same answer as the last comment: The Auto indenting function lies in the codeviewer.css document. If you follow the instructions you have a codeviewer folder with both the codeviewer.php and codeviewer.css files inside it.