CODEWITHSUNDEEP
javascripthtmlangularjsjsonformat
Ostap Lisovyj
Ostap Lisovyj

Reputation: 190

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?

Upvotes: 1

Views: 64

Answers (1)

rfornal
rfornal

Reputation: 5122

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

Upvotes: 1

Related Questions