Django - create code blocks in html templates

Question

Django - create code blocks in html templates

577 Views Asked by Steve At 31 December 2022 at 17:41

I would like to create a web page that will display data I have in a table inside a code block just the way it is here, even with a copy function. I can already display the data on the page, I just like to have it formatted in a pretty box, maybe even with syntax highlights, I looked at Pygments but I can't get it to work.

Below is a sample code block that I would like to re-create in my Django app. Please don't pay attention to the actual code, this is only a sample. I would appreciate if you could please let me know in detail how to implement this.

# Python Program to find the area of triangle

a = 5
b = 6
c = 7

# Uncomment below to take inputs from the user
# a = float(input('Enter first side: '))
# b = float(input('Enter second side: '))
# c = float(input('Enter third side: '))

# calculate the semi-perimeter
s = (a + b + c) / 2

# calculate the area
area = (s*(s-a)*(s-b)*(s-c)) ** 0.5
print('The area of the triangle is %0.2f' %area)

Original Q&A

There are 1 best solutions below

**Niko** · Accepted Answer · 2022-12-31T21:00:37.057000

Honestly, your question is more related to CSS and Javascript than Python / Django.

This took me a while...Based on what you said, I will assume you know the basics of Django.

models.py

from django.db import models

class Codeblock(models.Model):
    text = models.TextField()
    ...

views.py

from .models import Codeblock

def codes(request):
    codeblocks = Codeblock.objects.all()
    return render(request, 'list_codes.html', {'codeblocks': codeblocks})

To format code blocks you can use HTML pre and code tags (Bootstrap 5 examples):

<pre><code>{{codeblocks.text}}</code></pre>

The tricky part was trying to find a way to hightlight the syntax. After a few dead ends I have found highlight.js that worked very well. It has documentation on basic usage and various themes for you to play with, you can test them using this CDN library, it is also possible to write your own theme.

There was one last problem related on how to copy the text. Although it is easy to copy text to clipboard, its not an easy task (at least for me) to have a styled button placed in the right place. To not extend myself, after a while I found this highlightjs-copy project, that not only copy the text to clipboard but has a perfect button in the right place.

With that being said, at last, here is an example:

list_codes.html

<!DOCTYPE html>
<html>
    <head>
        <!-- bootstrap -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        
        <!-- highlight.js -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/ashes.min.css" integrity="sha512-KX15mI6Sw0VzQyAOf4MAPS9BZ0tWXyZrGPHKSkqDmy40Jl+79f8ltpj6FvLJ+3obnH56ww0ukclsd6xGAxb5mA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
        <script>hljs.highlightAll();</script>
        
        <!-- highlightjs-copy -->
        <script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
        <link
        rel="stylesheet"
        href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"
        />
        <script>hljs.addPlugin(new CopyButtonPlugin());</script>

    </head>
<body style="background-color: hsl(0,0%,22.5%);">
    {% for codeblock in codeblocks %}
        <div class="container">
            <!-- Need to be in one line or will not render correctly -->
            <pre><code class="language-python">{{codeblock.text}}</code></pre>
        </div>
    {% endfor %}
</body>
</html>

Django - create code blocks in html templates

There are 1 best solutions below

Related Questions in DJANGO

Related Questions in DJANGO-TEMPLATES

Related Questions in PYGMENTS

Trending Questions

Popular # Hahtags

Popular Questions