Using CDATA Section to Escape Characters on Blogger.com

We can use <![CDATA[ (the characters we wanna escape) ]]>

The Background
Blogger.com uses XHTML. Generally speaking, like, a general would speak, it is an application of XML which extends the functionality of HTML so that it can operate with the custom data provided from the server.
Such as the <b:widget>, <data:post.title/>, <b:loop>, <b:if> and other Blogger data tags.

The content within the <![CDATA[ ]]> (Character Data) section will be interpreted as only character data, not markup.

The Forbidden Characters
First of all, the common forbidden characters are:

< (less than character)
> (greater than character)
& (and character)

The double quote (") and single quote (') in Blogger template will be automatically replaced by " and ', respectively.

Usage in Script Tag
The script tag (JavaScript) can be placed anywhere in the head or in the body section of a Blogger blog, depends on what's the purpose of that particular application.

The CDATA section can be declared like so:

<script>
  //<![CDATA[

    /*  your script here.
    ||  It can contain <, >, &, ", ', and others.
    ||  Just like in the normal HTML
    */

  //]]>
</script>

This will be useful if you type the script in the template section or in the post itself. And that script has "forbidden" characters.

Example:

<script>
  //<![CDATA[
    function my_app(something) {
        if (something < 8) {
            return true;
        }
    }
  //]]>
</script>

As you can see above, the CDATA opening and closing marks are declared as comments in the JavaScript.
I've tried declaring them as comments and not, and both actually work.
That example above is the common method I observed in the Blogger templates (the provided designs and from other tinkerers). We should use the common method first.

This method will also work if you paste, for instance, jQuery or other JavaScript library on your template.

Added June 14, 2015 | updated on Aug 7, 2015

If you need to get the value from a particular Blogger <data> tag, then don't escape it. Start the escaping after that variable.
Example:

<script>
    function my_app(something) {
        var blogger_thingy = "<data:post.appRpcRelayPath/>",
        // Start escaping here
        // <![CDATA[
            other_thingy = [my_super_array].length < something;
        if (blogger_thingy && something) {
            return other_func(other_thingy);
        } else {
            // something...
        }
    }
  //]]>
</script>

Usage in Styling
Blogger provides us with <b:skin> tag (in the HTML template). We can put our CSS inside that.
The CDATA section can be declared like so:

<b:skin>
  <![CDATA[
  /*\
  |*|  Your CSS here (without wrapping it with <style> and </style>)
  |*|  It can contain <, >, &, ", ', and others.
  |*|  Just like in the normal HTML
  \*/
  ]]>
</b:skin>

Example:

<b:skin>
  <![CDATA[
    body {
        background: khaki;
        font-size: 18px;
    }
    .some_class > .some_other_class {
        display: inline;      
    }
  ]]>
</b:skin>

But, if you do not want to put the styling inside the <b:skin>, and that code has "forbidden" characters, then do this:

<style>
  /*<![CDATA[*/
  /*\
  |*|  Your CSS here
  |*|  It can contain <, >, &, ", ', and others.
  |*|  Just like in the normal HTML
  \*/
  /*]]>*/
</style>

As you can see above, the CDATA section marks are also declared as comments in the CSS.

Example:

<style>
  /*<![CDATA[*/
    body {
        background: khaki;
        font-size: 18px;
    }
    .some_class > .some_other_class {
        display: inline;      
    }
  /*]]>*/
</style>

The Small Things
If you need to escape some small things without CDATA section, here's some list:

< (less than character) is <
> (greater than character) is >
& (and character) is &
" (double quote character) is "
' (single quote character) is ' or ' in decimal

This is a post about using it (the escaped character) "live" to solve that kinda error notification from Blogger.

Port Raptor also made that encoder/decoder tool right there

But, you know, there's some trade-off. Especially if you decode the mixed encoded characters. It won't look exactly as the original-before-it-was-encoded one.

For instance, you have
something.innerHTML = "<div>teets</div>";

And on another line, you have
<span>bloody winkor</span>

Then surely, everything will be broken.
Hearted

In Conclusion
There are ways of escaping characters on Blogger. Those are:

Using CDATA section. As this post suggested.
Or, use external script/CSS, as in:
- <script src="our_script_url.js"></script> for JavaScript.
- <link href="our_styling_url.css" rel="stylesheet"/> for CSS.
We should have (we can rent that) a CDN which provides https for our libraries/frameworks. Therefore, they will work on Blogger's post preview.

But don't you worry, most (free and public) CDNs now provide it (secure connection) — Google, Microsoft, CDNJS, jQuery CDN, Bootstrap CDN, etc.
Remember to always put https:// protocol in front of the script/CSS source link.
The last, if it's just a minor thing, we can manually type the encoded character(s) in our application or styling or other typed thing.

Monkey Raptor

Monkey Raptor

Saturday, November 8, 2014

Using CDATA Section to Escape Characters on Blogger.com

2 comments