Ostap Lisovyj Ostap Lisovyj - 14 days ago 10
AngularJS Question

Show JS and CSS code in Angular application

In my Angular 1.x application (using ES5) I need to show the user the sample of formatted css and js code on the UI (with indentations, line-breaks, etc.), which the the user will need to copy and paste into his own html file. The sample of code:

<style type='text/css'> html, body { margin: 0 }
.banner {
display: block;
position: absolute;
</style>
<script>
window.showSmth = function(item) {
// some logic here
}
</script>


I've tried to search for some 3rd parties, but no results so far, could someone advice me on this?

Answer

In HTML proper, there’s no way short of escaping the characters.

The only solution guaranteed to work everywhere is to escape the code (< and & as &lt; and &amp;, respectively) manually.

  1. Replace the & character with &amp;

  2. Replace the < character with &lt;

  3. Replace the > character with &gt;

  4. Optionally surround your HTML sample with <pre> and/or <code> tags.

Syntax highlighting sites:

rainbows (very Perfect)

prettify

syntaxhighlighter

highlight

JSHighlighter

Comments