torsdag
17
Aug 06
Familjen Carlström

Code Viewer

Kl 20:58 av Familjen Carlström i CodeViewer, WordPress currently 12 038 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.

41 Comments

  1. CodeGator UNITED STATES on 2006-08-21 at 3.33 e m (Reply)
    Internet Explorer 6.0 Windows XP

    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.

    1. Familjen Carlström SWEDEN on 2007-07-18 at 1.41 e m (Reply)
      Internet Explorer 7.0 Windows XP

      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

  2. fr3@K TAIWAN on 2006-09-28 at 6.45 f m (Reply)
    Mozilla Firefox 1.5.0.7 Ubuntu Linux

    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.

    1. Familjen Carlström SWEDEN on 2007-07-18 at 1.37 e m (Reply)
      Internet Explorer 7.0 Windows XP

      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

  3. a2800276 GERMANY on 2006-11-07 at 6.29 e m (Reply)
    Mozilla Firefox 1.5.0.7 Linux

    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…

    1. Familjen Carlström SWEDEN on 2007-07-18 at 1.32 e m (Reply)
      Internet Explorer 7.0 Windows XP

      Try to download again. The version-numbering is updated and the uploaded version works!

       

      /Håkan

  4. a2800276 GERMANY on 2006-11-07 at 6.30 e m (Reply)
    Mozilla Firefox 1.5.0.7 Linux

    Are comments turned off? I can't seem to post anything?

    1. Familjen Carlström SWEDEN on 2007-07-18 at 1.35 e m (Reply)
      Internet Explorer 7.0 Windows XP

      Every comment got stuck with Akismet and it took a while before I saw this.

      Hopefully OK now.

      Håkan C

  5. Ivan CROATIA on 2007-02-09 at 3.37 e m (Reply)
    Mozilla Firefox 2.0.0.1 Windows XP

    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 

    1. Familjen Carlström SWEDEN on 2007-07-18 at 1.32 e m (Reply)
      Internet Explorer 7.0 Windows XP

      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

  6. WordPress 2.2.1

    […] Plugins Page | Download […]

  7. WordPress 2.2.1

    […] CodeViewer pulls source code from an external file and displays it, optionally adding a link to download the code directly. […]

  8. WordPress 2.1.2

    […] Plugins CodeViewer pulls source code from an external file and displays it, optionally adding a link to download the […]

  9. WordPress 2.2

    […] Visit […]

  10. WordPress 2.2.2

    […] CodeViewer pulls source code from an external file and displays it, optionally adding a link to download the code directly. […]

  11. alto AUSTRALIA on 2007-08-14 at 8.58 f m (Reply)
    Mozilla Firefox 2.0.0.6 Windows XP

    hi familjen and all:  this looks wonderful , cant wait to have a go at it. alto 

  12. Aaron :: miLienzo.com UNITED KINGDOM on 2007-09-02 at 11.23 e m (Reply)
    Mozilla Firefox 2.0.0.6 Windows XP

    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

    1. Familjen Carlström SWEDEN on 2007-09-03 at 5.03 e m (Reply)
      Internet Explorer 7.0 Windows XP

      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

  13. kod renklendirici - Zoque.Forum GERMANY on 2007-09-03 at 12.35 e m
    Netscape Navigator 4.0

    […] 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. […]

  14. Aaron :: miLienzo.com UNITED KINGDOM on 2007-09-03 at 5.27 e m (Reply)
    Mozilla Firefox 2.0.0.6 Windows XP

    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?

  15. WordPress 2.2

    […] 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. […]

  16. WordPress 2.2

    […] 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. […]

  17. Manele Noi ROMANIA on 2007-09-20 at 5.07 e m (Reply)
    Mozilla Firefox 2.0.0.7 Windows XP

    I tested your plugin and is really nice. This Help me a lot with my blog! Thank You!

  18. WordPress 2.2.2

    […] (These instructions basically parallel those for CodeViewer 1.4) […]

  19. WordPress 2.3.2

    […] 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 […]

  20. Adam UNITED STATES on 2008-01-24 at 5.30 e m (Reply)
    Mozilla Firefox 2.0.0.11 Mac OS

    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!

    1. Familjen Carlström SWEDEN on 2008-04-21 at 5.47 e m (Reply)
      Internet Explorer 7.0 Windows XP

      The default value of showsyntax is now no (v1.4.4)

  21. WordPress 2.3.3

    […] the mean time, you can find the most up to date version of Code Viewer at Håkan’s site. Happy […]

  22. Andy UNITED STATES on 2008-02-25 at 6.39 e m (Reply)
    Mozilla Firefox 2.0.0.12 Windows Vista

    This is a great plugin. It is going to help me so much. Thanks a lot!

  23. Andy UNITED STATES on 2008-02-25 at 9.29 e m (Reply)
    Mozilla Firefox 2.0.0.12 Windows Vista

    Just one more comment. How do you turn on the auto indenting? Thanks

    1. Familjen Carlström SWEDEN on 2008-04-21 at 5.45 e m (Reply)
      Internet Explorer 7.0 Windows XP

      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.

  24. supercooper UNITED STATES on 2008-04-12 at 4.48 f m (Reply)
    Mozilla Firefox 2.0.0.13 Mac OS

    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.

    1. Familjen Carlström SWEDEN on 2008-04-21 at 5.46 e m (Reply)
      Internet Explorer 7.0 Windows XP

      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.

  25. victorswatches.com on 2013-11-04 at 7.42 e m
    PHP

    victorswatches.com

    Codeviewer 1.4 | Familjen Carlströms Blog

  26. wireless speakers on 2013-11-04 at 8.16 e m
    PHP

    wireless speakers

    Codeviewer 1.4 | Familjen Carlströms Blog

  27. allplussizemaxidresses.com UNITED STATES on 2013-11-04 at 9.36 e m
    PHP

    allplussizemaxidresses.com

    Codeviewer 1.4 | Familjen Carlströms Blog

  28. cocktail dresses UNITED STATES on 2013-11-04 at 9.39 e m
    PHP

    cocktail dresses

    Codeviewer 1.4 | Familjen Carlströms Blog

  29. Michael Kors Handbag UNITED STATES on 2013-11-04 at 9.42 e m
    PHP

    Michael Kors Handbag

    Codeviewer 1.4 | Familjen Carlströms Blog

  30. PHP

    http://www.bluetoothheadphonesreviewer.com/

    Codeviewer 1.4 | Familjen Carlströms Blog

  31. breitling UNITED STATES on 2013-11-04 at 9.48 e m
    PHP

    breitling

    Codeviewer 1.4 | Familjen Carlströms Blog

  32. slugging wrenches CHINA on 2014-06-20 at 9.58 e m
    PHP

    slugging wrenches

    Codeviewer 1.4 | Familjen Carlströms Blog

Leave a comment

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image