Replies: 1 comment 1 reply
-
|
You need to tell Unpoly to run Highlight.js after rendering a new page fragment that requires custom JavaScript. This is normally done with an Unpoly compiler. I haven't tested this, but perhaps something like: up.compiler('pre > code', (e) => {
highlightElement(e)
})I don't see anything from your example to indicate how highlight.js is selecting that specific |
Beta Was this translation helpful? Give feedback.
-
|
Hello @adam12, and thank you for your response. I've just tested it, and it works really well. On the same day, I also asked the same question on the Django Discord to increase the chance of getting a quick response, and someone suggested putting <script>hljs.highlightAll();</script> in the content that Unpoly loads, which worked for syntax highlighting. However, I think I'll stick with your solution. Otherwise, I don't need to specify for highlight.js to target a specific div for highlighting; I used <script>hljs.highlightAll();</script>, which automatically traverses through everything. thank you again! |
Beta Was this translation helpful? Give feedback.
-
I'm currently exploring Unpoly in a CRUD project managing issues akin to GitHub's. I'm using Django as the backend and highlight.js for syntax highlighting code snippets, just to give you context. I completed the project without using Unpoly, and everything worked fine up to that point. However, when I tried to add Unpoly for page navigation without page reload using the
up-targetattribute inaHTML tags, navigation works smoothly without page reload, but I lose syntax highlighting for my code snippets. I'm unsure what's causing this issue. Could you please assist me?# base.html {% load static %} {% load compress %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta property="og:description" name="description" content="Apprends la programmation avec Python en partant de zéro avec nos formations en français sur le langage Python." /> <title> {% block title %} {% endblock %} </title> {% compress css %} <link rel="stylesheet" href="{% static 'src/output.css' %}" /> {% endcompress %} <link rel="stylesheet" href="{% static 'src/dracula.css' %}" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/unpoly.min.css" /> </head> <body class="dark bg-gray-50/98 dark:bg-gray-800/95"> <header> {% include 'partials/navbar.html' %} </header> <main class="bg-gray-50/98 dark:bg-gray-800/95 min-h-screen root"> <div class="max-w-screen-xl mx-auto flex flex-col flex-wrap items-center justify-between p-4"> {% block content %} {% endblock %} </div> </main> <footer> {% include 'partials/footer.html' %} </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/unpoly.min.js"></script> <script type="text/javascript" src="{% static 'plugins/js/highlight.min.js' %}"></script> <script> hljs.initHighlightingOnLoad() </script> {% block js %} {% endblock %} </body> </html># detail.html {% extends 'base.html' %} {% load static %} {% load compress %} {% load martortags %} {% block content %} <h1 class="text-3xl my-2" style="color: skyblue; margin-bottom: 2rem;">{{ issue.title }}</h1> <div class="w-4/5 dark:text-white markdown-p">{{ issue.content|safe_markdown }}</div> {% endblock %} {% block js %} {% endblock %}Observed Behavior:
Expected Behavior:
Thank you in advance.
Beta Was this translation helpful? Give feedback.
All reactions