Forums

Posting Code Snippets Clearly!

Mizpah 09 Oct, 2009
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!
GreyHead 10 Oct, 2009
[syntax lang=php]<?php
//testing
$testing = 'Is this working now?';
?>
<p>Some html here</p>[/syntax]
Mizpah 10 Oct, 2009
<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"><!--
GreyHead 10 Oct, 2009
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
Mizpah 10 Oct, 2009
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!
GreyHead 10 Oct, 2009
Hi Mizpah,

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

Bob
Mizpah 10 Oct, 2009
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 ^^
GreyHead 10 Oct, 2009
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
GreyHead 11 Oct, 2009
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
Mizpah 11 Oct, 2009
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!
This topic is locked and no more replies can be posted.