Posting Code Snippets Clearly!

Heya Folks,

Just tried somthing and discovered it works, Bob you may find this handy as well. If people already know this apologies but I havent seen it in use on here! Oh, and I dont think you have a suggestion forum for the forums!

There is a default way with a phpBB3 forums of making code snippets much easier to see. Consider this code:

<!--New uname field with divs-->
<div class="form_item">
			<div class="form_element cf_textbox">
				<label class="cf_label" style="width: 150px;">Username:</label>
				<input class="cf_inputbox required validate-alphanum" maxlength="150" size="30" id="uname" name="uname" type="text">
				<span id="indicator1" style="display: none"><img src="/images/hourglass.gif" alt="checking..." /></span>
				<div id='username_msg' ></div>
			</div>

A lot of green text, not especially clear. Now consider this code:

<span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><!--</span><span class="syntaxdefault"> New uname field with divs </span><span class="syntaxkeyword">--><br /><</span><span class="syntaxdefault">div class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"form_item"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">            </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">div class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"form_element cf_textbox"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">                </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">label class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"cf_label"</span><span class="syntaxdefault"> style</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"width: 150px;"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Username</span><span class="syntaxkeyword">:</</span><span class="syntaxdefault">label</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">                </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">input class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"cf_inputbox required validate-alphanum"</span><span class="syntaxdefault"> maxlength</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"150"</span><span class="syntaxdefault"> size</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"30"</span><span class="syntaxdefault"> id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"uname"</span><span class="syntaxdefault"> name</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"uname"</span><span class="syntaxdefault"> type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"text"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">                </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">span id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"indicator1"</span><span class="syntaxdefault"> style</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"display: none"</span><span class="syntaxkeyword">><</span><span class="syntaxdefault">img src</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"/images/hourglass.gif"</span><span class="syntaxdefault"> alt</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"checking..."</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">/></</span><span class="syntaxdefault">span</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">                </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">div id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'username_msg'</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">></</span><span class="syntaxdefault">div</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">            </span><span class="syntaxkeyword"></</span><span class="syntaxdefault">div</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault"> </span>

Its not quite perfect, but very easy to use with no further plugins or board confihuration needed. When creating code tags simply add '=php' to the opening tag. i.e.:

*some code*

Hope this helps, and Bob if you are interested its quite easy to modify the bbcode buttons to add that in, or even to provide a more streamlined version!

The more streamlined version woudl be http://www.phpbb.com/community/viewtopic.php?f=69&t=1697035 - I have used this on some of my boards in the past - lots of nice functionality!

[syntax lang=php]<?php
//testing
$testing = 'Is this working now?';
?>
<p>Some html here</p>[/syntax]

<span class="syntaxdefault"><?php<br /></span><span class="syntaxcomment">//test<br /></span><span class="syntaxkeyword"><!--</span><span class="syntaxdefault"> test </span><span class="syntaxkeyword">--><br /></span><span class="syntaxdefault">if </span><span class="syntaxkeyword">(</span><span class="syntaxdefault">var </span><span class="syntaxkeyword">==</span><span class="syntaxdefault"> </span><span class="syntaxstring">'somthing){<br />getdocumentbyid.(var).value = '</span><span class="syntaxdefault">blah<br /></span><span class="syntaxkeyword">}else{<br /></span><span class="syntaxdefault">do somthing else<br /></span><span class="syntaxkeyword">}<br /></span><span class="syntaxdefault">?></span>

Array.implement({
  
  invoke: function(fn, args){
    var result = [];
    
    for (var i = 0, l = this.length; i < l; i++){
      if(this[i] && this[i][fn])
        result.push(args ? this[i][fn].pass(args, this[i])() : this[i][fn]());
    }
    return result;
  }
  
});

[code=php]<span class="syntaxdefault"><?php<br /></span><span class="syntaxcomment">//test<br /></span><span class="syntaxkeyword"><!--

Hi Mizpah,

I seem to have messed up the forum fonts in the process and would love to have the default box a bit bigger (and get rid of that Syntax Highlighting banner) !

Working on it among other things

Bob

Heya Bob,

Thanks so much for implememnting - was just taking a look now! - its a great tool, I will just dig out the code for the default box depth, I have that somewhere!

Hi Mizpah,

Thanks for the link - very useful. Once it's working reasonably I'll add some Editor buttons.

Bob

Hi Bob,

Hmm, I cant find my edits for box height - I will throw a post on the boards and try somthing on my demo site ^^

Just a brief comment some of the anomalies seem template related. In this thread I get an error:


Message: Object doesn't support this property or method
Line: 197
Char: 24
Code: 0
URI: http://www.chronoengine.com/forums/classes/scripts/select_expand_bbcodes.js

Yet - with an identical post on my demo 3.0.5 (subsilver) forums no errors! - http://www.enigmaguild.org/distribution/viewtopic.php?style=1&f=2&t=2&p=5#p5

It's never as simple as we want things to be is it ? :mrgreen:

Hi Mizpah,

Yechhhh . . . I'l try and sort it out later. The resize function is there OK and should be being added to the prototype if I read the script correctly.

Bob

Hi Mizpah,

Sorry I couldn't easily find a fix and so removed the Syntax highlighter. I found this post which I think is a similar problem but I don't obviously see where the conflict is, it might be with the MooTools library :-(

Bob

hmm, I think mootools is also in on my test site - and thats fine with subsilver - out of interest if you have a local dev copy of the chronosite, but you enable the stock prosilver template does it still error ?

Also if you want, and have a copy of the template used for this sites forum I can upload it to my test site and have a play next time I get hit by insomnia!