Login/Register
Highlight.JS in Textarea
Asked Answered
javascripthtmlsyntax-highlightinghighlighthighlight.js
M

5

25

So I have been struggling to use Highlight.JS in a textarea, because 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 way to do this, so I am not going to explain it in too detail. But at the end, I would prefer to have code typed into the textarea highlighted in JavaScript.

Merchantable answered 13/10, 2013 at 15:40 Comment(0)
S
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.

Smorgasbord answered 18/12, 2014 at 19:3 Comment(2)
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. – Winou
What if ace does not have necessary language? – Badmouth
E
26

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.

Exacerbate answered 5/9, 2014 at 17:43 Comment(0)
H
4

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>
Hankypanky answered 13/8, 2023 at 14:52 Comment(1)
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. – Tacho
M
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.

Midas answered 21/8, 2014 at 20:19 Comment(1)
Actually, the usage page specifically says "You can use any tags instead of <pre><code> to mark up your code", but <textarea> is indeed different as its content is not in the DOM. – Exacerbate
M
0

Here is an example of my HighlightJs Vue Plugin that works.

<template>
  <Highlightjs contenteditable="true" class="h-full" language="js" :code="modelValue" @input="inputChanged" />
</template>

<script setup lang="ts">
import {getCurrentInstance} from 'vue'
import 'highlight.js/lib/common'
import hljsVuePlugin from "@highlightjs/vue-plugin"
import 'highlight.js/styles/github-dark.css'

if (!appRegistered) {
  console.debug('Registering Highlightjs')
  appRegistered = true
  getCurrentInstance()?.appContext.app.use(hljsVuePlugin)
}

const { component: Highlightjs } = hljsVuePlugin

defineProps<{
  modelValue: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

function inputChanged(event: any) {
  emit('update:modelValue', event.target.textContent)
}
</script>

<script lang="ts">
let appRegistered = false
</script>

<style>
.hljs {
  @apply dark:bg-black/80 text-[var(--text-color)] overflow-auto h-full min-h-20
}
</style>
Manufacture answered 24/7 at 23:40 Comment(1)
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Tacho

© 2022 - 2024 — McMap. All rights reserved.