Testing WordPress’s Code Syntax Highlighting

(12/04/11)

TEST 1:

This example introduces a bit of test code we are calling ‘CODE SNIPPET A’. It uses the ‘sourcecode’ tag and has no language attributes or parameters.

Code Snippet A
[sourcecode]
<form id="form1">
<div>
<input id="btnShowMessage" type="button" value="show message" />
<div id="divMessage" style="background-color: yellow;">THIS IS THE MESSAGE</div>
</div>
</form>
[/sourcecode]

NOTE: When you are in your dashboard editing your post you will not be able to see the syntax highlighting. Don’t freak out. Do a save and ‘preview’ and everything should be just fine.

TEST 2:

This is snippet A except now we have added the language=’html’ attribute.

[sourcecode language=”html”]
<form id="form1">
<div>
<input id="btnShowMessage" type="button" value="show message" />
<div id="divMessage" style="background-color: yellow;">THIS IS THE MESSAGE</div>
</div>
</form>
[/sourcecode]

TEST 3:

Well that’s all good for plain old html. But, what if our code is from a scripting language, such as PHP, that alternates back and forth between html and the script code? In that case, you could use something like

[sourcecode]
[sourcecode language="php" htmlscript="true"]
// … Code Goes Here …
[/sourcecode]

[/sourcecode]

Code Snippet B
[sourcecode language=”php” htmlscript=”true”]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
nameOutput = jQuery(‘#nameOutput’);
nameOutput.css({‘background’:’yellowgreen’});
jQuery(‘body’).css({
‘background’:’#A66900′,
‘font-family’:’comic sans ms’,
});
nameOutput.wrap(‘<span style="color:purple;">’);
jQuery(‘#wrap’).addClass(‘centered’);
jQuery(‘#wrap’).css({
‘background’:’#F2B449′,
})
});
</script>
<style type="text/css">
/****** COLORS *******
#A66900 // brown
*/
.centered {
margin: 0 auto;
width: 66%;
}
</style>
<div id="wrap">
<?php echo "Welcome to " . ‘hell’; ?>
<br />
<?php

echo "<pre>";
print_r($_SERVER);
echo "</pre>";

$model = new stdClass();
$model->smurf = ‘Papa’;
echo "my smurf = " . $model->smurf;

$model->_name = isset($_POST[‘userName’]) ? $_POST[‘userName’] : ‘[not defined!]’;
echo "<pre>";
print_r($model);
echo "</pre>";
?>
<H1>THIS PAGE IS CURRENTLY UNDER CONSTRUCTION AND TESTING</H1>

<form id="main" action="<?php echo $_SERVER[‘PHP_SELF’]; ?>" method="post">
<input type="text" name="userName" value="Enter Your Name" />
<input type="submit" name="submit" />

<div id="nameOutput" name="nameOutput">
<?php if(isset($_POST[‘userName’])) echo stripslashes($_POST[‘userName’]); ?>

</div>
<div id="content"></div>
</div>
[/sourcecode]

Date Published: 2011-12-04
Date Updated: 2022-09-05

Eric Hepperle

Eric loves to write code, play guitar, and help businesses solve challenges with code and design.
Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

[…] Testing WordPress’s Code Syntax Highlighting (codeslayer2010.wordpress.com) […]

1
0
Would love your thoughts, please comment.x
()
x