- Joined
- Dec 14, 2021
- Messages
- 28
- Reaction score
- 2
I have this code, it should work well, but it doesn't and I can't find out why. I also should mention that this does use the prismjs library. I customized it to let my created HTML element of codeform to be used like the pre element in the library.
When I run the code I get this:
However, I should be getting this:
How do I get work the way that I want? As I don't understand where the undefineds come from. I do believe that the problem is when the strings are reconstructed into the array splited. As I have looked at the thisLine array and have seen that there are no undefineds, so where do they come from?
JavaScript:
function codeform123() {
var cod = document.querySelectorAll("codeform");
for (let i=0; i < cod.length; i++) {
var type = cod[i].getAttribute("type");
var content = cod[i].innerHTML.split(/\n/||/\r/||/\n\r/||/\r\n/);
cod[i].innerHTML = "";
for (let ii=0; ii < content.length; ii++) {
if (content != "") {
var thisLine = content[ii].split("");
const splited = [];
var splitedNum = 0;
var sa = 0;
var sb = 1;
var back = 0;
var iii;
for (iii=0; iii<thisLine.length; iii++) {
if (thisLine[iii] == "undefined" || thisLine[iii] == undefined || thisLine[iii] == null) {continue;}
if (thisLine[iii] == " " && thisLine[iii+1] == " " && back == 0) {
splited[sa+splitedNum] += thisLine[iii];
} else {
if (thisLine[iii] != " " || thisLine[iii+1] != " ") {
back = 1;
if (iii==0) {
sa=1;
sb=0;
}
splited[sb+splitedNum] += thisLine[iii];
} else {
splitedNum+=2;
splited[sa+splitedNum] += thisLine[iii];
back = 0;
}
}
}
for (iii=0; iii<splited.length; iii++) {
if (splited[iii].includes(" ")) {
cod[i].innerHTML += splited[iii];
} else {
var code = document.createElement("code");
code.classList = "language-"+type;
code.innerHTML = splited[iii];
cod[i].appendChild(code);
}
}
if (ii != (content.length-1)) {cod[i].innerHTML += "\n"||"\r"||"\n\r"||"\r\n";}
} else {
if (ii != (content.length-1)) {cod[i].innerHTML += "\n"||"\r"||"\n\r"||"\r\n";}
}
}
}
}
codeform123();
HTML:
<codeform type="css">#test {
width: 1px;
height: 1px;
}</codeform>
CSS:
codeform {
display: block;
color: #f8f8f2;
background: #272822;
margin: 1em 0;
padding: 4px;
border-radius: 8px;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
When I run the code I get this:
CSS:
undefined#test {
undefined undefinedwidth: 1px;
undefined undefinedheight: 1px;
undefined}
However, I should be getting this:
CSS:
#test {
width: 1px;
height: 1px;
}
How do I get work the way that I want? As I don't understand where the undefineds come from. I do believe that the problem is when the strings are reconstructed into the array splited. As I have looked at the thisLine array and have seen that there are no undefineds, so where do they come from?