Using CDATA Section to Escape Characters on Blogger.com

We can preserve our string using CDATA section:

<![CDATA[ ...our string here... ]]>

---

CDATA Section

Blogger uses XHTML. 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 string within the <![CDATA[ ]]> (Character Data) section will be interpreted as only character data, not markup. This is the definition.

---

The Forbidden Characters

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

The double quotes (") 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[*/ // Here is the script string. /*]]>*/ </script>

This will be useful if we put the script in the template section or in the post itself, and that script has forbidden characters.

Example:

<script> /*<![CDATA[*/ function myFunction(myParameter) { if (myCondition) { return myResult; } } /*]]>*/ </script>

The CDATA opening and closing marks are declared as comments in the script.

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.

This method will also work if we paste, for instance, jQuery or other JavaScript library onto the template.

Accessing Blogger Data as JavaScript Variable

If we need to get the value from a particular Blogger <data>, this is how we do it:

<script> function myFunction(myParameter) { let bloggerDataExample = "<data:post.appRpcRelayPath/>"; // Start escaping here. // <![CDATA[ /* Your script methods go here. */ // End the escaping. // ]]> } </script>

---

Usage in Styling (CSS)

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 styling goes here. */ ]]> </b:skin>

Example:

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

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

<style> /*<![CDATA[*/ /* Your styling goes here. */ /*]]>*/ </style>

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>

---

Other

Here's a list of other escaped characters:

• < (less than character) is &lt;
• > (greater than character) is &gt;
• & (and character) is &amp;
• " (double quotes character) is &quot;
• ' (single quote character) is &apos; or &#39; in decimal

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

---

Port Raptor also made that encoder/decoder tool at this link.