Show JS and CSS code in Angular application

Question

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?

try this simple integration for better visibility alexgorbatchev.com/SyntaxHighlighter — Vinod Louis
– Vinod Louis, Commented Nov 21, 2016 at 13:05
This looks pretty straight-forward: github.com/pc035860/angular-highlightjs — Founded1898
– Founded1898, Commented Nov 21, 2016 at 13:27

bob-fornal · Accepted Answer · 2016-11-21 13:31:21Z

1

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 < and &, respectively) manually.

Replace the & character with &
Replace the < character with <
Replace the > character with >
Optionally surround your HTML sample with <pre> and/or <code> tags.

Syntax highlighting sites:

rainbows (very Perfect)

answered Nov 21, 2016 at 13:31

bob-fornal

5,1205 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Show JS and CSS code in Angular application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related