Is the lack of code highlighting a bug?[BUG]

[baloyou]

When I use the code plugin to add a piece of code, the content page does not display code highlighting.

The version of django-cms is 4.1.1, and I am using a virtual environment with venv. The issue exists by default after installation via pip.

[fsbraun]

No, HTML's <pre> tag does not do code highlighting. There are JS libraries out there, which do this, such as highlight.js. You would need to use one of those.

Out of the box, djangocms-frontend does only support features that are HTML native or provided by the frontend framework (which by default is Bootstrap 5).

[fsbraun]

There is a bug, however, since for code blocks the markup should read <pre><code>the code goes here</code></pre>. The inner <code> seems to be missing.

[baloyou]

No, HTML's \<pre\> tag does not do code highlighting. There are JS libraries out there, which do this, such as highlight.js. You would need to use one of those.

Out of the box, djangocms-frontend does only support features that are HTML native or provided by the frontend framework (which by default is Bootstrap 5).

Yes, I modified code.html and manually added the code tag, now I can achieve syntax highlighting through Prism. However, if I insert code multiple times, it will result in duplicate inclusion of Prism's CSS and JS files. Is my approach incorrect?

thank!!!

this is code.html

{% load i18n cms_tags %}

<{{ instance.code_type|default:"code" }}{{ instance.get_attributes }}>
<code>
{{ instance.code_content }}
</code>
</{{ instance.code_type|default:"code" }}>

{% block base_css %}
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
{% endblock base_css %}

{% block base_js %}
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
{% endblock base_js %}

[fsbraun]

I just released djangocms-frontend 1.3.3 which should fix the <pre><code> part of the issue. And yes, you're not doing it right here 😉.

django CMS uses django-sekizai to avoid repeated inclusion of css or js. Do this instead:

{% load i18n cms_tags sekizai_tags %}

<{{ instance.code_type|default:"code" }}{{ instance.get_attributes }}>
<code>
{{ instance.code_content }}
</code>
</{{ instance.code_type|default:"code" }}>

{% addtoblock css %}<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">{% endaddtoblock %}

{% addtoblock js %}
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
{% addtoblock %}

See here for more.

[baloyou]

I just released djangocms-frontend 1.3.3 which should fix the \<pre\><code> part of the issue. And yes, you're not doing it right here 😉.

django CMS uses django-sekizai to avoid repeated inclusion of css or js. Do this instead:

{% load i18n cms_tags sekizai_tags %}

<{{ instance.code_type|default:"code" }}{{ instance.get_attributes }}>
<code>
{{ instance.code_content }}
</code>
</{{ instance.code_type|default:"code" }}>

{% addtoblock css %}<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">{% endaddtoblock %}

{% addtoblock js %}
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
{% addtoblock %}

See here for more.

This is so cool and very effective (I should have looked at the docs more, thanks again)

[fsbraun]

@baloyou I see you are using Chinese locales. If you wanted to have a more consistent user experience with Chinese labels etc., and would like to spend some time on it, I would appreciate it if I could add you as a translator to django CMS frontend! Every single string translated helps. Join us on discord and let me know! https://discord-main-channel.django-cms.org/

[baloyou]

My English is a bit poor (relying on translation software) and I am new to DjangoCMS, so when I am familiar with it, I am willing to participate in the work of Chinese. @fsbraun :) :)

[fsbraun]

Thank you so much, @baloyou ! You'll find it's a great community!

Translation software helps a lot and a good way to contribute! If you use it, you'll have the better understanding than I what the best Chinese translation for "Code", "Background", "Spacing", or "Visibility" is (taken from the dialogue window above).

(I'd come up with "代码", "背景", "间距", and "能见度". Is that meaningful?)

[baloyou]

You're right, translation work gives me a better understanding of the framework (but I'll have to wait until I get familiar with the basic features) If you're asking me if the translation of "Code", "Background", "Spacing", or "Visibility" is appropriate, I think: exactly @fsbraun

[fsbraun]

🙌
Sure, no pressure. I just wanted to say, why I can see you adding value. Now, those officially are the first 4 words of the djangocms-frontend package translated to Chinese!! 🎉

[baloyou]

@fsbraun I've copied the corresponding .po file and I'll come back and share it with you if there's work.

I have another small question, though. I use "heading" to generate multiple layers of titles, and when I want to generate the corresponding "table of contents", the toc must be below the heading to display (the above is not good) Is this a bug? (The toc above "Heading" is not displayed.)

[fsbraun]

That's correct. If you want to display the toc at the top, put content and toc in a row with two columns, both with width 12 (i.e. full width). Put the content into the first column, the toc into the second, and in the columns dialogue change the display order: first the toc, then the content.

[fsbraun]

Background info: The toc information is collected as the page is rendered. This is a 1 pass process (due to speed) and hence the heading information for the toc is only available after all heading plugins have been rendered.

[baloyou]

hi @fsbraun ,I have a question about "link/button", assuming I have a large amount of data (e.g. 2000 pages) will the "internal link" drop-down box be displayed all at once? Will there be performance issues?