Highlight.js in textarea

Question

So i have been struggeling to use highlight.js in a text area since obviously this doesn't work:

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="styles/default.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<form>
    JavaScript Injection: <br> 
<pre>
<code>
<textarea name="js_execute" cols="50" rows="10" "></textarea>
</code>
</pre>
<input type="button" name="Inject_Execute_Button" value = "Inject" onclick="executeJS()" >
</form>

<script type="text/javascript">
 function executeJS()
 {
     alert("Wohoo");
 }
</script>


<style type ="text/css">

</style>
</body>
</html>

I'm pretty sure there's an easy answer to this so i won't explain it in too detail but at the end i would prefer to have code typed into the textarea highlighted in JavaScript.

score 31 · Answer 1 · edited Apr 21 '16 at 08:41

31

You might want to look at http://ace.c9.io/, which does syntax highlighting, but is specifically aimed at editing.

Note however that it does not use textarea either, probably for the same reasons mentioned by @isagalaev.

edited Apr 21 '16 at 08:41

BenMorel

34,448
50
182
322

answered Dec 18 '14 at 19:03

Pierre-Antoine

1,915
16
25

4

This is the correct answer. Highlight js is for highlighting code snippets (to explain or exemplify code in html documents). The ace editor is for editing code online. It's fully featured, full blown and just plainly a dope app. – lol Nov 01 '15 at 06:30
What if ace does not have necessary language? – Aleksey Kontsevich Oct 31 '18 at 21:09

score 25 · Answer 2 · answered Sep 05 '14 at 17:43

The simple answer is that highlight.js won't work in a textarea because its content is not part of the page and it simply can't have any styles by itself. If you want a text editor in a browser with highlight.js you probably should look into contenteditable so you could call hljs.highlight() on its content on every change. However I'm not aware of any successful implementation of this.

score 0 · Answer 3 · answered Aug 21 '14 at 20:19

0

I understand from the usage page that it will highlight the code inside the <pre><code> tags. Not from any other container.

In your example, it would highlight the html of the textarea itself, as it is inside the <pre><code> tags, and not de contents of the textarea.

answered Aug 21 '14 at 20:19

RubenCaro

1,419
14
12

1
Actually, the usage page specifically says "You can use any tags instead of `
```
` to mark up your code", but `` is indeed different as its content is not in the DOM.
```
– isagalaev Sep 05 '14 at 17:35

score 0 · Answer 4 · answered Aug 13 '23 at 14:52

you can use highlighted-code to highlight the textarea

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highlighted Code Example</title>
</head>

<body>
  <textarea is="highlighted-code" cols="80" rows="12" language="javascript" tab-size="2" auto-height>console.log("highlighted code textarea");</textarea>
  <script type="module" defer>
    (async ({ chrome, netscape }) => { if (!chrome && !netscape) await import('https://unpkg.com/@ungap/custom-elements'); const { default: HighlightedCode } = await import('https://unpkg.com/highlighted-code'); HighlightedCode.useTheme('github'); })(self);
  </script>
</body>

</html>

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Aug 15 '23 at 11:50

Highlight.js in textarea

4 Answers4