VCode v1.0

[syonidv]

VCode v1.0

Developer:	Virgil Sovereign
Tested In:	Firefox 6.0.2, Chrome 1.0, IE 9.0
Description:	Code copying/beautification/markup for UBBC and Proboards v4+.

---

VCode is a portable, lightweight code presentation utility for UBBC markup, with specific enhancements for the Proboards v4+ DOM. It was developed in response to the minimal, bug-ridden [code] tag native to Proboards v4. The minified VCode scripts, images, and Flash components comprise 40 KB of data, packing down into a sleek 22 KB under standard compression. The code was designed to be plug n' play, with no configuration or editing required beyond:

• unpacking the VCode archive into a public directory
• inserting a 6-line header block and 2-line footer block into Proboards headers
• updating the src attributes of the header/footer tags

Even so, VCode supports 46 reconfigurable options/styles in two definition scripts which enterprising developers may tweak in order to customize the look and feel of the software.


Usage

---

VCode markup is an extentsion to standard UBBC. Currently the specification adds three tags:

Inline Code
[@ [col|bw|off] [js|css|html] [<CSS colour spec>]] [/@]

Block Code
[@@ [col|bw|off] [js|css|html] [<CSS colour spec>] ["<Title>"|""|~] ] [/@@]

Configurable Code
[@? [<Description>]] [/?]

Inline code flows with the normal text layout. For example:

Delete everything between the [@]<blockquote>[/@] and [@]</blockquote>[/@] tags.becomes

Block code appears in its own block, optionally with border and/or title. For example:

[@@ "Global Footer"]
<style type="text/css">
   .vsim p { margin-top:1em; margin-bottom:4em; }
/*  .vsim p a:first-child { font-size:15px; } quirks mode chokes on pseudoselectors */
   .vsimsub { font-size:15px; }
   .vsim input { margin-top:2em; margin-bottom:2em; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript">

/* VSim - Simplifies your forum thread index... a lot. (V. Sovereign; code may be freely modified/redistributed) */

var VSim = {
   sMarkup : '<table align="center" width="92%" class="vsim"><tr><td>' + ($('a[href$="action=post"]').length ?
       '<input type="button" value="New Thread" onClick="document.location += \'&action=post\'" />' : '<br />'),

   init : function() {
       $('td[width="43%"],td[width="48%"]').not('[class="catbg"]').each( function() {
           VSim.sMarkup += '<p>' +
               '<font class="vsimsub">' + $(this).find('font')[0].innerHTML + '</font><br />' +
               $(this).parent().find ('td[width="20%"] font')[0].innerHTML.replace( /<br[\s\/]*>/ig, ' ' ) + '<br /><br />' +
               this.title + '...</p>';
       } );
       $('table[width="92%"]').css( 'display', 'none' ).last().after( VSim.sMarkup + '</td></tr></table>' );
   }
};
if( /\bboard=\w+$/.test( document.location.href ) )
   VSim.init();

</script>
[/@@]becomes

And for example:

Footer: [@@ bw ~]<!-- VCode 1.0 Footer -->
<script vcode type="text/javascript" src="http://syonidv.hodginsmedia.com/vcode/vcode.js"></script>
<script type="text/javascript" src="http://syonidv.hodginsmedia.com/vcode/vcodepb.js"></script>
<!-- End VCode -->[/@@]becomes

Tag 'attributes' (such as 'col', '<Description>', etc.) can appear in any order and are always optional. For the [@] and [@@] tags, options are:

col bw off		col - use full colour syntax highlighting bw - use grayscale syntax highlighting (links are still coloured) off - no syntax highlighting <omit> - use default specified by admin
js css html		js - treat the outermost code level as JavaScript css - treat the outermost code level as CSS html - treat the outermost code level as HTML <omit> - determine format automatically* (recommended)
<CSS colour spec>		specifies the background colour for the code block/line. Legal values include transparent, hex codes (e.g. 7f000c, #ff3428), all CSS colour constants (e.g. green, navy), rgb and rgba declarations (e.g. rgb(148,92,44), rgba(0,0,255,0.2)). If omitted, the defaults (specified by admin) are used.
"<title>" "" ~		"<title>" - gives the code block a border, with title** <title> "" - gives the code block a border but no title** ~ - gives the code block neither a border nor a title <omit> - use default specified by admin

*overrides should typically only be used if the VCode parser misidentifies the code format
**border and title attributes are allowed for inline code tags but are ignored

The configurable code [@?][/?] tag may only appear inside [@][/@] or [@@][/@@] tags. It is used to mark out lines/blocks that can be edited or may otherwise be of interest to code readers. The tag "attributes", if present, provide the description of the content marked by the tag. For example:

Footer: [@@ ~](function() {
[@? Remove this if you want the hack to apply to yourself.]if( pb_username == 'admin' )
return;[/?]
var eNav = $('<div style="display:inline;"></div>');
$('body > table:not([class]) td').first().contents().each( function() {
if( this.nodeType == 1 && /table/i.test( this.tagName ) )    return false;
eNav.append( $(this).clone() );
});
$('#forumjump').replaceWith( eNav );
eNav.parent().attr( 'align', 'left' );
})();[/@@]becomes

As seen in the example, configurable code blocks present readers with a pop-up of the given description. It also allows reader to manually edit the code (using the HTML 5 contentEditable specification) before copying it. If the description is omitted, a default description (specified by the admin) is used instead.


Features

---

Other notable benefits/features of VCode include:

• Hovering over block code with the mouse provides the reader with three (labeled) copy icons in the top right corner.
  
  Copy Code to Clipboard copies the text version of the code to the clipboard (sans formatting).
  
  Copy Flattened Code to Clipboard eliminates leading whitespace from all lines and copies the code to the clipboard.
  
  Copy UBBC Formatted Code to Clipboard preserves all formatting using UBBC markup and copies the code to the clipboard. The copied text can be used as an approximation for VCode formatting on boards without support for VCode markup.
  
  
• VCode is guaranteed reversible. The text submitted to Proboards in a post, including all whitespace, tabstops, markup, and special characters, is guaranteed to be returned by Proboards if a post is later quoted or modified.
  
  Currently, VCode will raise a debug error if (due to an untested corner case) a non-reversible post is detected. This behaviour stands in stark contrast to the Proboards [code] tag, which does not guarantee reversibility (and in fact violates it rather egregiously in many cases).
  
  
• VCode inlines/blocks can be manually selected and copied without loss of structure/whitespace information in all browsers.
  
  
• VCode syntax highlighting for CSS automatically converts all valid CSS colour specs to their specified colour and all valid websafe CSS font face specs to their specified font face.
  
  
• VCode is designed around speed and efficiency. VCode constructs are embedded in [sup][sub] blocks to take advantage of the document.querySelectorAll() method and avoid expensive DOM traversal, token scanning in .innerHTML, and full-post .innerHTML rewrites. Due to this special embedding method, VCode markup may appear embedded in quote blocks, signature blocks, board descriptions,
  
  and anywhere UBBC is supported.
  
  Additionally, virtually all major processing (token parsing, syntax highlighting, etc.) in VCode occurs poster-side rather than viewer-side, making it 'offline' as far as board viewers are concerned.
  
  
• VCode is guranteed not to introduce XSS or other markup injection exploits (this guarantee applies only to the unmodified configuration, naturally.)
  
  
• VCode will work with any existing post modification hacks, including exhanced smileys, UBBC 'style' tags, etc. All UBBC tags and UBBC extension tags may be used inside [@] and [@@] constructs so long as a leading '@' is included in the tag name.
  
  For example, document.getElementById( '[style background-color:red][i]your ID here[/i]][/style]' ) should become document.getElementById( '[@style background-color:red][@i]your ID here[/i]][/style]' ).
  
  It is important to note, however: i) Proboards does not support nesting for most UBBC tags and hence inserting custom UBBC markup into [@] and [@@] constructs may interfere with col and bw mode syntax highlighting, and ii) VCode currently hasn't been tested with any 'standard' post modification hacks except for 'Extended Smilies (sic)' by Todge. Many view-side UBBC modification hacks are notorious for clobbering objects/elements/markup created by co-hacks.
  
  
• VCode aims to be fully compatible with all major browsers.
  
  
• VCode uses several techniques to minimize the amount of markup added for syntax highlighting and whitespace preservation, keeping posts below those pesky character limits even for large code bodies.
  
  
• VCode converts all valid code URLs to hyperlinks.
  
  
• With the exception of a few (obscure) functions, VCode JavaScript resides entirely in the VCode, VCQ, VCPB, VCC, and VDTD namespaces (and V$ for the minified version).
  
  
• VCode uses the ZeroClipboard JavaScript library by Joseph Huckaby (distributed under the MIT license).
  
  
• Most VCode styles, display elements, and syntax highlighting options are customizable using two configuration scripts (vcodedefs.js and vcodepbdefs.js).
  
  
• VCode maintains consistent font sizes between browsers, unlike both the [tt] and [code] tags. VCode does not rely on [pre] (whitespace preformatting) and uses breakable whitespace wherever possible, although copy-as-UBBC-code copies are currently marked up as [pre].
  
  
• All Proboards-specific code in VCode is contained in script files vcodepb(-min).js and vcodepbdefs.js. The UBBC syntax highlighter defined by vcode(-min).js and vcodedefs.js can be used as a standalone library for syntax highlighting.

Installation

---

To install VCode, unzip the attached archive (vcode1.0.zip) into a public directory on any HTTP-accessible server. Let the URL of this directory be represented by http://x/.

Place in the GLOBAL HEADER:

<!-- VCode 1.0 Header -->
<script type="text/javascript" src="code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="syonidv.hodginsmedia.com/vcode/ccv.js"></script>
<script type="text/javascript" src="syonidv.hodginsmedia.com/vcode/dtdv.js"></script>
<script vcode type="text/javascript" src="syonidv.hodginsmedia.com/vcode/vcodedefs.js"></script>
<script type="text/javascript" src="syonidv.hodginsmedia.com/vcode/vcodepbdefs.js"></script>
<script type="text/javascript" src="syonidv.hodginsmedia.com/vcode/ZeroClipboard.js"></script>
<!-- End VCode -->

And in the GLOBAL FOOTER:

<!-- VCode 1.0 Footer -->
<script type="text/javascript" src="syonidv.hodginsmedia.com/vcode/vcode-min.js"></script>
<script type="text/javascript" src="syonidv.hodginsmedia.com/vcode/vcodepb-min.js"></script>
<!-- End VCode -->

Substitute in http://x/ for syonidv.hodginsmedia.com/vcode/ in all applicable src attributes. Save the headers/footers. No further configuration is necessary, although administrators interested in customizing VCode should look at configuration scripts vcodedefs.js and vcodepbdefs.js.


WormoCodes

---

The current release of VCodes should actually be v0.9 since it technically isn't out of the beta yet. I've tested it with a number of my own codes and several off of Proboards support, but there are bound to be a number of bugs, edge cases, RFEs, compatibility problems, conflicts, etc. that need to be sorted out.

I've deployed VCode on one of the forums on my "home" board (notmsnmoney.proboards.com), but this is a financial discussion board and the number of people who regularly post code there—myself included—is precisely zero. I could create my own board and direct people there, but why not use one of the Proboards code repositories already up and running? ...and which I already happen to have a member account with. ;D

My ultimate goal is to test, enhance, and debug VCode to the point where it becomes an attractive option for code repositories and (hopefully) is adopted by Proboards support. The code is licensed under the GPL 2.0; freely modifiable and redistributable. To the WormoCodes admins: I would be most grateful if you installed VCode somewhere useful (even if it's sandboxed on some obscure forum) and put it through the ringer to help identify bugs or suggest improvements. Or, if you don't think this is the appropriate venue, I'll ship out on my own.

Thanks for your consideration.

   - V. Sovereign

Attachments:

[Wormopolis]

definately over my head, but I would add in something about if someonse tries to use this to embed harmful javascript into a post that you arent liable for the results.

[syonidv]

I would stake a million dollars on people not being able to use this for XSS attacks, Wormo. But I suppose a liability waiver couldn't hurt.

Would you be willing to sandbox it somewhere and try it out? I'm looking for beta testers who will do their darndest to break it. I know Jua does that for skins and board designs. Are there members here that do the same thing with code, or am I barking up the wrong tree?

If you prefer, I can direct you to the board on my home site where I have a VCode implementation already up and running, but the point of posting it here was because this board should theoretically be much more visible to the Proboards coding community.

[Wormopolis]

You want someone to break, just wait for Eton to stumble upon this. He has way better tools then I do.

I can make an entirely new board for testing this if you want people to try it out.

[syonidv]

No, it's fine Wormo. Should I PM Eton?

[Wormopolis]

I believe he is currently on a break. I havent seen him around much on support, and everyone needs some time away now and then. If you see him start posting on support, you can probably send him a PM there to grab his attention.

[Wormopolis]

you have a reliable host already setup for this code that I can tap into? I dont have a host, and I can setup a test board for putting in codes so my entire site doesnt hog bandwidth as people peruse my library.