Saturday, 23-Jan-16 23:04:00 CET

Porting my blog for the second time, render code

This is post #45 of my series about how I port this blog from Blogengine.NET 2.5 ASPX on a Windows Server 2003 to a Linux Ubuntu server, Apache2, MySQL and PHP. A so called LAMP. The introduction to this project can be found in this blog post https://www.malmgren.nl/post/Porting-my-blog-for-the-second-time-Project-can-start.aspx.

Recently I had several Art oriented visitors of my website that got completely confused when arriving at this ongoing series about programming the new blog engine. They had anticipated something with art. Where is the art? The new blog will have a special tab for that. My new site will be so much better when it is live. There are however some things to do first so lets get on with it.

With all the tabs in place it was time for another round of importing data from the old blog. Up until now I have been working with the first batch of data from the old server with blog posts until 5 September. All blog posts created since then I left on the old sever. Since 5 September I have been blogging about this project. There has been a lot of new kinds of texts. Perhaps you can imagine that if I am talking about a div tags then a layout based on div tags will be messed up. Also talking about place holders with curly brackets how I would handle the LeftSideBar for example then when rendering that the layout would break.

My main solution for this is to detect pre tags and escape the special characters within upon rendering. That solved many problems but there are many places where am using courier instead of pre and then my magnificent escape would not work. To solve this during import I converted the courier sections into pre sections.

Here I deliberately talk about these challenges in regular text without any curly bracket etc. That is because in my third and perhaps final round of import I really don't want to fix issues with problems because I talk about fixing issues.

That said the handling of code is worth some mentioning because it is really useful. The rendering of the pre tags is done in several layers. First of all to start with the content of the pre tags are stored without any special escaping in the database. When the pre tag is displaying less-than and greater-than characters then these characters got the potential to break the layout of the pre tag or even the page layout. So these characters are escaped. The same with curly brackets. The escape of special characters takes place in the php during the collection of the page data as the result of the request to the webserver. See this php code:

function EscapeContent($ip_strContent)
{
	preg_match_all("/≺(pre|code).*?≻(.*?)≺\/(pre|code)≻/ms", $ip_strContent, $preMatches, PREG_OFFSET_CAPTURE );
	$matches_terms = $preMatches[2];
	for ($i = count($matches_terms) - 1; $i ≻= 0; $i--)
	{
		$match = $matches_terms[$i];
		$match_text = $match[0];
		$escaped_text = str_replace(
			array('≺',		'≻',	'{',			'}'),
			array('& lt ;',	'& gt ;',	'& #123 ;',	'& #125 ;'), 
			$match_text);
		$match_position = $match[1];
		$ip_strContent = substr_replace($ip_strContent, $escaped_text, $match_position, strlen($match_text));
	}
	
	$ip_strContent = str_replace(
			array
			(
				'div'
			),
			array
			(
				'& #100 ;& #105 ;& #118 ;'
			),
			$ip_strContent);
	return $ip_strContent;
}

Obviously the htm entities here should not have spaces in them when used in a php page. When the rendered page content is transferred to the client then upon presentation in the client a script is run to transform the lines of the pre tag in such way that each line will present a line number. For this I found a sample from Taufik Nurrohman at http://jsfiddle.net/tovic/AbpRD/ See this JavaScript code:

var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i ≺ pl; i++) {
        pre[i].innerHTML = '≺span class="line-number"≻≺/span≻' + pre[i].innerHTML + '≺span class="cl"≻≺/span≻';
        var num = pre[i].innerHTML.split(/\n/).length;
        for (var j = 0; j ≺ num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '≺span≻' + (j + 1) + '≺/span≻';
        }
    }

Inserted this simple script in the document.ready function. Then I added the following rules to the css:

pre {
  background-color:#eee;
  overflow:auto;
  margin:0 0 1em;
  padding:.5em 1em;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  border-right:1px solid;
  text-align:right;
}

pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}

pre .cl {
  display:block;
  clear:both;
}

With this the pre tag has line numbers. Makes me happy.

The cool thing with this is that it makes it possible to select texts from the pre tag and copy these and paste them and the pasted text behaves properly without any escape codes or line numbers etc.

Unfortunately when escaping divs all sorts of in-page constructions are reviled. So that had me go over the entire blog again again to find little inline div constructions and find a suitable filter for these.

Oh well...