Familjen Carlströms Blog

Codeviewer is updated to version 1.4.3. Downloads at the CodeViewer-post below:

CodeViewer

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.

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

1. Download Code Viewer v1.4.4 (MD5 Sum: 0e667da2c95ab3ebbca60d808f54e9b3
2. Extract the contents in the rar-file.
3. Upload the codeviewer-directory into your wp-content/plugins/ directory.
4. Activate the plugin on your WP Admin » Plugin Management page by clicking the corresponding “Activate” link under the Action column.
5. Goto WP Admin » Options » Codeviewer and edit the default paths. 
6. 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.
7. 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]

1. /***************************************

2. * This file shall be put into the directory
3. * wp-content/plugins/code-viewer
4. * Created by Håkan Carlström
5. * www.familjencarlstrom.se
6. ***************************************/
7.  
8. ol.codelist{
9. border:1px solid #303130;
10. background-color:#FEFEFE;
11. font-size:13px;
12. font-family:'Courier New',Courier,monospace;
13. }
14.  
15. ol.codelist li.even{
16. background-color: #aebbc6;
17. }
18.  
19. ol.codelist li.odd{
20. }
21.  
22.  
23. ol.codelist li.tab0 { padding-left: 2px; }
24. ol.codelist li.tab1 { padding-left: 26px; }
25. ol.codelist li.tab2 { padding-left: 50px; }
26. ol.codelist li.tab3 { padding-left: 74px; }
27. ol.codelist li.tab4 { padding-left: 98px; }
28. ol.codelist li.tab5 { padding-left: 122px; }
29. ol.codelist li.tab6 { padding-left: 146px; }
30. ol.codelist li.tab7 { padding-left: 170px; }
31.  
32.  
33. ol.codelist li code { color: 222; }
34.  
35. ol.codelist div {
36. margin: 0;
37. padding: 1px 2px;
38. }
39.  
40. ol.codelist div.tab0 { padding-left: 2px; }
41. ol.codelist div.tab1 { padding-left: 26px; }
42. ol.codelist div.tab2 { padding-left: 50px; }
43. ol.codelist div.tab3 { padding-left: 74px; }
44. ol.codelist div.tab4 { padding-left: 98px; }
45. ol.codelist div.tab5 { padding-left: 122px; }
46. ol.codelist div.tab6 { padding-left: 146px; }
47. ol.codelist div.tab7 { padding-left: 170px; }
48.  
49. ol.codelist li.sourcelink {
50. color: 000;
51. font: 115% Georgia, "Times New Roman", Times, serif;
52. list-style: none;
53. margin-left: -32px;
54. padding-top: .85em;
55. text-align: center;
56. }
57.  
58. ol.warning{
59. }