CODEWITHSUNDEEP
htmlhighlight.js
A1pha
A1pha

Reputation: 3

Highlighting.js does not colour code but only wraps it in formatting markup

I use highlight.js in my Django project, and it doesn't work. It doesn't, highlight the code, but it wraps it with many span class tags.

My base.html:

<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="shortcut icon" type="image/png" href="{% static 'images/logo.png' %}" />
    <link rel="shortcut icon" type="image/png" href="{% static 'images/logo.png' %}" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

    <title>PythonBin</title>

    {% block base_css %}
      <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" />
      <link rel="stylesheet" href="{% static 'css/sticky-footer-navbar.css' %}" />
    {% endblock %}

    {% block extra_css %}

    {% endblock %}
  </head>
...

The html of page I where I want use highlighting:

{% extends 'base.html' %}
{% load static %}

{% block extra_css %}
  <style>
    textarea {
      font-family: monospace;
    }
  </style>
{% endblock %}

{% block content %}
  <div class="row">
    <div class="col">
      <form>
        <fieldset disabled>
          <div class="form-group row">
            <div class="col col-8">{{ addform.name.label }}: {{ addform.name }}</div>
            <div class="col col-4">{{ addform.user.label }}: {{ addform.user }}</div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
  <pre>
    <code class="language-python">{{ addform.code.label }}: {{ addform.code }}</code>
  </pre>
{% endblock %}

I tried to change initialization of hljs, like using scripts to prevent loading until page would be loaded, but it didn't help.

Output

Upvotes: -2

Views: 36

Answers (1)

A1pha
A1pha

Reputation: 3

The key to solution was to add

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>

in base.html

Upvotes: 0

Related Questions