What's the best way to format HTML, CSS and JavaScript code within a JavaScript
Question
I need to be able to put code in an ace editor div section. What's the best way to ignore the code so that I can easily put in in a string format?
I have tried multiple styles of quotes
editorHTML.setValue('<html>
<head>
<meta charset=utf-8>
<title>HTML5 canvas demo</title>
</head>
<body>
<p>Canvas pane goes here:</p>
<canvas id=pane width=300 height=200></canvas>
<script>
</script>
</body>
</html>');
editorCSS.setValue('p {font-family: monospace;}
');
editorJavaScript.setValue('var canvas = document.getElementById('pane');
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(250,0,0)';
context.fillRect(10, 10, 55, 50);
context.fillStyle = 'rgba(0, 0, 250, 0.5)';
context.fillRect(30, 30, 55, 50);
');
This code doesn't work. I am assuming there is a really easy way to do it but after searching I cannot find it.
1 answers
solution1
0 2019-06-11 16:35:10
You have two problems there:
JavaScript doesn't allow raw line breaks in string literals.
Your last string is quoted with
'but has unescaped's inside it.
You have at least three options:
In modern JavaScript (ES2015+), you can use a template literal. Unescaped newlines are allowed in template literals. An untagged template literal creates a string.
You can escape the newlines with a backslash.
You can use string concatenation.
Example of #1:
editorHTML.setValue(`<html>
<head>
<meta charset=utf-8>
<title>HTML5 canvas demo</title>
</head>
<body>
<p>Canvas pane goes here:</p>
<canvas id=pane width=300 height=200></canvas>
<script>
</script>
</body>
</html>`);
editorCSS.setValue(`p {font-family: monospace;} `);
editorJavaScript.setValue(`var canvas = document.getElementById("pane");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(250,0,0)";
context.fillRect(10, 10, 55, 50);
context.fillStyle = "rgba(0, 0, 250, 0.5)";
context.fillRect(30, 30, 55, 50);
`);
Example of #2:
editorHTML.setValue('<html>\
<head>\
<meta charset=utf-8>\
<title>HTML5 canvas demo</title>\
\
</head>\
<body>\
<p>Canvas pane goes here:</p>\
<canvas id=pane width=300 height=200></canvas>\
<script>\
\
</script>\
</body>\
</html>');
editorCSS.setValue('p {font-family: monospace;} ');
editorJavaScript.setValue('var canvas = document.getElementById("pane");\
var context = canvas.getContext("2d");\
\
context.fillStyle = "rgb(250,0,0)";\
context.fillRect(10, 10, 55, 50);\
\
context.fillStyle = "rgba(0, 0, 250, 0.5)";\
context.fillRect(30, 30, 55, 50);\
');
Example of #3:
editorHTML.setValue('<html>' +
'<head>' +
'<meta charset=utf-8>' +
'<title>HTML5 canvas demo</title>' +
'' +
'</head>' +
'<body>' +
'<p>Canvas pane goes here:</p>' +
'<canvas id=pane width=300 height=200></canvas>' +
'<script>' +
'' +
'</script>' +
'</body>' +
'</html>');
editorCSS.setValue('p {font-family: monospace;} ');
editorJavaScript.setValue('var canvas = document.getElementById("pane");' +
'var context = canvas.getContext("2d");' +
'' +
'context.fillStyle = "rgb(250,0,0)";' +
'context.fillRect(10, 10, 55, 50);' +
'' +
'context.fillStyle = "rgba(0, 0, 250, 0.5)";' +
'context.fillRect(30, 30, 55, 50);'
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.