vanillaforums/Garden — Issue #1318: 'pre' tags have issues with XML tags — output code messed up
Author: aahan
Created: 2012-03-10 01:48:16+00:00
State: open

**[[The following issue has been reported on forums here](http://vanillaforums.org/discussion/19329/button-bar-plugin-parsing-script-and-style-tags-inside-pre-tags-even-on-these-forums)]**

**Issue**

When 'pre' is used to create code blocks containing XML tags like ``````, `````` and probably other XML tags that I haven't tested, are simply REMOVED.

If any such XML tag is present at the beginning or end of the code block, both the XML tag and the line itself are removed. If an XML tag is somewhere between the first and last lines, only the XML tag is removed, and an empty line is shown.

**How to reproduce the issue?**

This is how a code block is normally published in a post, right?

<pre><script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style></pre>

But when you do so, the published post shows the code like this (rather say, the code block is output like this):

The funny thing is, even the GitHub editor (for reporting Issues) has this problem. So, it's probably not a native Vanilla Forums issue? I hope it can be fixed still.

**Pointer**

I use this simple HTML encoder script to encode HTML first (save the code as a .html file):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function convert(){
var ele1 = document.getElementById("somewhere");
var replaced;
replaced = ele1.value;
replaced = replaced.replace(/&/ig, "&amp;");
replaced = replaced.replace(/</ig, "&lt;");
replaced = replaced.replace(/>/ig, "&gt;");
replaced = replaced.replace(/"/ig, "&quot;");
replaced = replaced.replace(/±/ig, "&plusmn;");
replaced = replaced.replace(/©/ig, "&copy;");
replaced = replaced.replace(/®/ig, "&reg;");
replaced = replaced.replace(/ya'll/ig, "ya'll");
ele1.value = replaced;
}
</script>
</head>

<body>
<textarea cols="70" id="somewhere" rows="15" style="background: none repeat scroll 0% 0% rgb(250, 250, 250); border: 2px solid rgb(204, 204, 204);"></textarea><br />
<input onclick="convert();" type="button" value="Encode" />
</body>
</html>

So, when I want to embed this code in a post:

<pre><script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style></pre>

I use the encoded code instead, like this:

```<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>```

and the output is like this, just as it should be without all the manual work (of having to encode first):

<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>