Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highlight.js in textarea

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.

like image 372
Kivi Freak Avatar asked Oct 13 '13 15:10

Kivi Freak


People also ask

How do you highlight text in textarea?

You can't actually highlight text in a <textarea> . Any markup you would add to do so would simply display as plain text within the <textarea> . The good news is, with some carefully crafted CSS and JavaScript, you can fake it.

How do you highlight in JavaScript?

There are many built-in functions in mark. js but we are using two functions for our requirement that is mark() and unmark() function respectively. Here mark() is used to highlight the search text and unmark() is used to remove highlighting the text that is highlighted before.

How do I highlight text in input field?

For selecting the content of an input (with highlight), use: el. select() .

How do you highlight a text box in HTML?

Highlight using the HTML5 <mark> tag If you are working on an HTML5 page, the <mark> tag can quickly highlight text. Below is an example of the how to use the mark tag and its result. If your browser supports the <mark> tag, "highlighted text" should have a yellow background.


1 Answers

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.

like image 124
Pierre-Antoine Avatar answered Sep 27 '22 19:09

Pierre-Antoine