CODEWITHSUNDEEP
javascripthtmlxmlsyntax-highlighting
karpengold
karpengold

Reputation: 7

Highlights code from javascript

I use SyntaxHighlighter - http://alexgorbatchev.com/SyntaxHighlighter/download/ How i can highlight code from javascript? I try 

var pre = document.createElement("pre");
pre.id = "preXml";
pre.setAttribute("class", "brush: xml");
pre.innerText = myXmlAsString;

but code look just like text without color

Upvotes: 0

Views: 116

Answers (1)

Gideon Pyzer
Gideon Pyzer

Reputation: 24008

As per the installation instructions, you need to include the core JS, the brush JS, the core CSS and a theme.

You can add the pre element in JavaScript as you were doing, but make sure you append the child to an already existing element on the page, in this case `body.

You then need to call SyntaxHighlighter.all() to execute the formatting.

var xml = "<div>Test</div>";

var pre = document.createElement("pre");
pre.id = "preXml";
pre.setAttribute("class", "brush: xml");
pre.innerText = xml;
document.body.appendChild(pre);
SyntaxHighlighter.all()
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>

Upvotes: 1

Related Questions