英文:
White space stripped from Django Template tags in PrismJS code blocks
问题
当我在prismjs块中呈现Django模板代码时，它会去掉空格{{}}和{%%}。
例如，在预渲染之前，代码可能是这样的：
{% image self.search_image thumbnail-400x200 as img %}
<img src="{{ img.url }}" alt="{{ img.title }}">
但渲染后的代码块将是这样的：
{%image self.search_image thumbnail-400x200 as img%}
<img src="{{img.url}}" alt="{{img.title}}">
这不是CSS的问题，空格从HTML中消失了。我可以将语言设置为HTML，甚至是Python等，问题仍然存在。
有人知道如何防止这种情况吗？
英文:
When I render Django template code in a prismjs block, it strips white space {{}} and {%%}.
For example, pre-render, the code might be
{% image self.search_image thumbnail-400x200 as img %}
<img src="{{ img.url }}" alt="{{ img.title }}">
But the rendered code block will be
{%image self.search_image thumbnail-400x200 as img%}
<img src="{{img.url}}" alt="{{img.title}}">
It's not a case of css, the space is missing from the html. I can set the language to HTML, or even python etc, the same issue remains.
Does anyone know of a way to prevent this?
答案1
得分: 0
PrismJS 正试图将你的 Django 模板标签视为所选择的语言，我们可以告诉 PrismJS 只忽略 <code> 块内部的内容，例如：
<pre><code class="language-none">{% image self.search_image thumbnail-400x200 as img %}
<img src="{{ img.url }}" alt="{{ img.title }}"></code></pre>
现在，如果我们想为你的情况找到一种解决方法，我们可以在显示它们在 PrismJS 中之前，将你的 Django 标签中的空格替换为 &nbsp;。
{%&nbsp;image self.search_image thumbnail-400x200 as img&nbsp;%}
<img src="{{&nbsp;img.url&nbsp;}}" alt="{{&nbsp;img.title&nbsp;}}">
英文:
PrismJS is trying to handle your Django template tags as the chosen language, we could just tells PrismJS to ignore the content inside the <code> block, for example:
<pre><code class="language-none">{% image self.search_image thumbnail-400x200 as img %}
<img src="{{ img.url }}" alt="{{ img.title }}"></code></pre>
Now if we want to find a workaround for your case we could replace the spaces in your Django tags with &nbsp; before you display them in PrismJS.
{%&nbsp;image self.search_image thumbnail-400x200 as img&nbsp;%}
<img src="{{&nbsp;img.url&nbsp;}}" alt="{{&nbsp;img.title&nbsp;}}">
答案2
得分: 0
以下是您要翻译的内容：
Not so much of an answer as a workaround. I've tacked on the following function to put those whitespaces back in:
const processDjangoCodeBlock = (element) => {
const content = element.innerHTML;
// Step 1: Insert whitespace after "{%" and "{{"
// if the next character is not whitespace
const step1Content = content.replace(/({%)(?!\s)/g, "$1 ")
.replace(/({{)(?!\s)/g, "$1 ");
// Step 2: Insert whitespace before "%}" and "}}"
// if the previous character is not whitespace
const step2Content = step1Content.replace(/(?<!\s)(%})/g, " $1")
.replace(/(?<!\s)(}})/g, " $1");
// Update the inner HTML of the element with the processed content
element.innerHTML = step2Content;
};
Not very satisfactory as I would prefer to just stop PrismJS stripping these in the first place. That issue is going to be lurking in the core code somewhere, another century when I have more time.
The calling template is a Wagtail block, which goes like:
<pre><code class="prism-block language-{{ self.language }}"
id="code-block-{{ block.id }}">{{ self.code }}</code></pre>
{% if self.language == "django" %}
<script>
document.addEventListener("DOMContentLoaded", () => {
processDjangoCodeBlock(
document.getElementById("code-block-{{ block.id }}")
);
});
</script>
{% endif %}
英文:
Not so much of an answer as a workaround. I've tacked on the following function to put those whitespaces back in:
const processDjangoCodeBlock = (element) => {
const content = element.innerHTML;
// Step 1: Insert whitespace after "{%" and "{{"
// if the next character is not whitespace
const step1Content = content.replace(/({%)(?!\s)/g, "$1 ")
.replace(/({{)(?!\s)/g, "$1 ");
// Step 2: Insert whitespace before "%}" and "}}"
// if the previous character is not whitespace
const step2Content = step1Content.replace(/(?<!\s)(%})/g, " $1")
.replace(/(?<!\s)(}})/g, " $1");
// Update the inner HTML of the element with the processed content
element.innerHTML = step2Content;
};
Not very satisfactory as I would prefer to just stop PrismJS stripping these in the first place. That issue is going to be lurking in the core code somewhere, another century when I have more time.
The calling template is a Wagtail block, which goes like:
<pre><code class="prism-block language-{{ self.language }}"
id="code-block-{{ block.id }}">{{ self.code }}</code></pre>
{% if self.language == "django" %}
<script>
document.addEventListener("DOMContentLoaded", () => {
processDjangoCodeBlock(
document.getElementById("code-block-{{ block.id }}")
);
});
</script>
{% endif %}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论