Hello, I know almost nothing about web pages, I already have the gml_string.js loaded in wordpress and initialized in the head of the page with a plugin. I tried the example renderToHTML:
https://yal.cc/r/20/gml_string/index.html#:~:text=Toma%20una%20lista%20de%20toke...
and it works for me, I could see it in the console but I don't really know how to render it inside the page. please help
You might do something like
var codeBoxes = document.querySelectorAll("pre:not(.gml)");
for (var i = 0; i < codeBoxes.length; i++) {
var codeBox = codeBoxes[i];
codeBox.classList.add(".gml");
codeBox.innerHTML = gml_string.renderToHTML(codeBox.innerHTML, "gml");
}
and add some CSS for it
.gmlError { color: red }
.gmlCommentLine, .gmlCommentBlock { color: #008000 }
.gmlKeyword, .gmlCurlyBracket {
color: #00379B;
font-weight: bold;
}
.gmlNumber, .gmlString { color: #00f }
.gmlLocal { color: #748 }
.gmlHeaderMeta, .gmlHeaderName { color: #0078AA }
.gmlScript { color: #808 }
.gmlFunction, .gmlMacro, .gmlVariable, .gmlEnum, .gmlEnumField {
color: #990000;
}
or, for websites with dark background:
.gmlError { color: #f0f }
.gmlCommentLine, .gmlCommentBlock { color: #5B995B }
.gmlMacro, .gmlEnum, .gmlEnumField {
color: #FF8080;
}
.gmlNumber { color: #FF8080 }
.gmlString { color: #FCF320 }
.gmlKeyword, .gmlCurlyBracket,
.gmlFunction, .gmlScript {
color: #FFB871;
}
.gmlLocal { color: #FFF899 }
.gmlVariable { color: #58E55A }
.gmlHeaderMeta { color: #A7B }
.gmlHeaderName { color: #77BB5B }