Archive

Posts Tagged ‘Source code’

Zemanta Puts Unwanted HTML Comments In Pre-Formatted PHP Code (Sourcecode) In WordPress Posts

April 9, 2012 4 comments

PROBLEM:

I  have recently determined through trial and error and process of elimination that Zemanta is responsible for adding extraneous HTML comments to my pre-formatted (with “pre” tags) PHP code that I have placed between “sourcecode” tags to activate WordPress.com’s built in programming code syntax highlighting.

Here is a screenshot (fig 1.) that demonstrates the problem:

codeslayer2010 blog with zemanta extraneous html comment errors

fig. 1

See, all that green is what commented my code out and made it so it doesn’t display correctly.

I am not totally sure Zemanta is to blame, but it seems the most likely culprit.  Here’s why:

  1. Identified 3 possible suspects: Zemanta, WordPress.com proofreading, and pasting pre-formatted code in Visual view instead of HTML view.
  2. Disabled Zemanta and retested –  problem remained.
  3. With Zemanta disabled, disabled proofreading as well.  No change.
  4. With Zemanta and proofreading disabled, went Edit>HTML View.  In each instance where I had posted code, deleted all the code from in between “sourcecode” tags.
  5. Re-copied and pasted code from each original PHP file.  Re-tested: Worked!  Syntax highlighting works properly now.  Made multiple edits to both code and text, updated and viewed the post — Good to go every time.
  6. Re-enabled Zemanta, made a test edit, saved and previewed the new post.  Everything is messed up again!  This is why I think Zemanta is the issue.

SOLUTION:

The solution I have come up with is this.

  1. If you want to use Zemanta, do so before adding any preformatted code or sourcecode tags.  Always turn Zemanta off when you are done using it.
  2. DO NOT, (under any circumstances) have Zemanta enabled if you have preformatted PHP code in your blog.  Chances are, Zemanta will mess your code up and you will have to re-paste your code again.  During my tests, I have had to paste all my sourcecode from scratch 3 times and let me tell you — it gets very tedious and wastes valueable time.
  3. Always paste sourcecode in HTML view only.

These are my recommendations based on my personal experience with this issue.  I’d love to hear from anyone else who is having similar issues.  Please let me know if this solution worked for you!

– CodeSlayer2010

Advertisements

Testing WordPress’s Code Syntax Highlighting

December 4, 2011 1 comment

(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

		<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>
	

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.

	<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>

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

	

Code Snippet B

	<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>
	

Is DropBox a good alternative for a WordPress CDN (image hosting site)?

November 16, 2011 3 comments
Image representing Photobucket (Old) as depict...

Image via CrunchBase

Image representing Dropbox as depicted in Crun...
Image via CrunchBase

Is DropBox a good alternative for a WordPress CDN (image hosting site)?

11/15/11

10:06 PM

So, tonight I’m seeking a better FREE solution for hosting my images for blogging purposes.  Up until now I have always used Photobucket, but recently I have experienced some issues with some of my images not showing up in WordPress.  It could be that the problem is with WordPress making changes; of that, I’m not sure.  Regardless, this difficulty has motivated me to see if there are any better free options.  So, today, I’m testing a service that I’m sure many of you are well aware of, but that I have only just heard about.  That service is Dropbox.com.

Step 1:Read up on DropBox.com

10:15 – 10:34

Reasearched DropBox service online. Here are some nice articles that give a good beginner’s overview:

Use Dropbox as a Free CDN for WordPress Blog_ – irnovo

How to Use Dropbox [With Video Tutorial] – irnovo

DropBox.com (Click “Watch a Video”)

Step 2: Download & Install the dropbox application

10:45

Downloaded, virus-scanned, and installed the app (Dropbox 1.2.48.exe)

Step 3: Create a new Dropbox account

10:52 – 11:08

Set email and password info and accepted terms of use. Selected 2GB Dropbox size (Free). Chose Advanced Setup type. Accepted to install Dropbox folder in “My Documents” (I’m on Windows XP Pro). Chose “Selective Sync” option. Completed installing and configuring Dropbox

Step 4: Read up on how to use Dropbox as a CDN for WordPress

11:14

Ran into a roadblock when I discovered that PLUGINS cannot be used on the WordPress.com com site! As this article states:

Plugins are tools used to extend the functionality of the WordPress platform. However, they are only applicable to self-hosted blogs and web sites using the WordPress.org software. Plugins are not permitted here at WordPress.com for various security reasons.

NOTE: It appears css styling, (inline or otherwise), has been disabled for WordPress.com accounts. When I look at the “Pro” option it talks about enabling custom css and styles. So, it seems they are now charging for what was once free. Neither the style attribute nor the standard XHTML “bgcolor” work for changing background color. If anyone disagrees with or can clarify this issue please leave a comment below. It is also possible that my current theme “Twenty Ten” may be overriding my inline styles.

UPDATE: By placing the keyword “!important” after each style rule you can force the browser to display your styles. For instance, the blue box above is achieved by this code:

[sourcecode language="php" htmlscript="true"]
<!-- inline -->
<blockquote style="background: #c3d5fd; color: black!important; border: black 2px solid; margin: 5px; padding: 5px!important;"> ... </blockquote>
[/sourcecode]
/* as a css style rule */
blockquote {
	background: #c3d5fd;
        color: black!important;
        border: black 2px solid;
        margin: 5px;
        padding: 5px!important;
}

11:17

Searched for similar function “widget”, which are included on the WordPress.com blogs. No go. So now I’ve either got to convert to the self-hosted wordpress-based blog, or find a way to manually connect serve files from my dropbox account

Step 5: Create an images folder in my dropbox and try to call it in a wordpress blog post

Simple enough. Then login to dropbox online account, navigate to the image file you want to use and click on it. Then copy the url from your browser and open a wordpress post and put an <img> tag in there, using the copied url as the href. Click to the “Visual” tab and if your image shows up, then you know it is getting through

11:49 PM

UPDATE: After seeming to have success, I discovered unfortunately that the image from your Dropbox folder only shows up in WordPress if you are logged into your dropbox account in a browser, and wordpress is open in that same browser. So, if I have my wordpress post open in a Firefox tab, and my dropbox online account logged in on another tab in Firefox, then the image will show up, but this is misleading – the general public will not be able to see your images – they will simply show as the dreaded “red x” placeholder. It looks like I will have to find another solution.

VERDICT:

Dropbox is a useful tool that is good for syncing files between multiple computers and devices. It is good for what it was designed for, however, thus far, it doesn’t appear to be a viable solution for WordPress hosted blogs

Styled and revised this post from 11:50 PM to 1:23 AM: (~ 1.5hrs)