Archive for the ‘CodeViewer’ Category

onsdag
18
Jul 07
Familjen Carlström

Codeviewer 1.4.3

Kl 20:21 av Familjen Carlström i CodeViewer, WordPress svenska currently 1 788 views

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

CodeViewer

torsdag
17
Aug 06
Familjen Carlström

Code Viewer

Kl 20:58 av Familjen Carlström i CodeViewer, WordPress currently 12 030 views Updated: 23 Jul, 2008

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. }

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 URL attribute 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 link attribute is optional.
    • display - string - Should the link to the code be displayed (yes), or not be displayed (no). If the link attribute is left out of the tag completely, the value defaults to no.
  • The lines attribute 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 scroll attribute is optional.
    • display - string - Should the scrollbar be displayed (yes), or not be displayed (no). If the scroll attribute is left out of the tag completely, the value defaults to no.
  • The scrollheight attribute is optional.
    • height- string - Height of the scrollbar. In px (pixels). Defaults to '100 px'(pixels).
  • The showsyntax attribute is optional.
    • display - string - Should the syntax used of [viewcode ]  be displayed (yes), or not be displayed (no). If the showsyntax attribute is left out of the tag completely, the value defaults to no.
  • The geshi attribute is optional.

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.