Implement Highlight.js in TextArea

19 views Asked by At

I have a Django app that currently has some tools for the user to try out. I made an implementation of TextFSM and the way its set up is by making a TextArea form where the user can type his code and then it will output the result. Form looks like this:


class TextFsmForm(forms.Form):
    """Form for the TextFsmParserView"""

    textfsm_template = forms.CharField(
        widget=CodeTextarea(
            attrs={
                "class": "p-3 form-control bg-transparent resizeable",
                "placeholder": "TextFSM Template",
            }
        ),
        label="TextFSM Template",
        required=True,
    )
    raw_text = forms.CharField(
        widget=CodeTextarea(
            attrs={
                "class": "p-3 form-control bg-transparent resizeable",
                "placeholder": "Raw Text",
            }
        ),
        label="Raw Text",
        required=True,
    )

And the html is like this:

        <div class="pe-2">
            <div class="mb-3 position-relative">
                <label class="mb-2 fs-5 display-4" for="{{ form.textfsm_template.id_for_label }}">{{form.textfsm_template.label}}</label>
                {{ form.textfsm_template }}
            </div>

            <div class="position-relative">
                <label class="mb-2 fs-5 display-4" for="{{ form.raw_text.id_for_label }}">{{form.raw_text.label}}</label>
                {{ form.raw_text }}
            </div>
        </div>

        <!-- Rendered output -->
        <div class="d-flex flex-column">
            <p class="fs-5 mb-2 display-4">Result</p>
            <div id="result" class="p-4 p-md-3 tool-output form-control">
             {% if output %}{{output}}{% elif error %}<span class="text-danger">{{error}}</span>{% endif %}
            </div>
        </div>

Now my problem here is that whenever I try to use either Highlight.js or Prism.js the only hightlight Im getting is the font changing. No colorization or anything.

Most relevant post I could find is here but still doesnt help out in any way. I want to make it highlighted like the inputs/output when using this parser for example. Any help appreciated

0

There are 0 answers