PrismJS代码块中Django模板标签空格被移除问题求助

• 禁用normalize-whitespace插件
  Prism自带的normalize-whitespace插件会自动清理代码中的冗余空格，包括Django模板标签{{}}和{%%}内部的空格。如果是通过CDN加载Prism，检查脚本链接里有没有prism-normalize-whitespace.min.js，直接删掉这段引用；本地项目里就移除对应插件的import或者引入代码。

• 自定义Django语法的Token规则
  如果禁用插件后问题还存在，就需要调整Prism对Django标签的识别逻辑，确保空格被当作有效内容保留。可以扩展Prism的语法定义，修改匹配正则：

Prism.languages.django = Prism.languages.extend('markup', {
  'tag': {
    pattern: /\{\{[\s\S]*?\}\}|\{%[\s\S]*?%\}/,
    inside: {
      'delimiter': /^\{\{|\}\}$|^\{%|%\}$/,
      'variable': /[\w.]+/,
      'whitespace': /\s+/, // 明确把空格标记为独立token
      'string': /(["'])(?:\\.|(?!\1)[^\\])*\1/
    }
  }
});

这段代码会让Prism把标签内的空格识别为单独的token，不会被自动清理。

• 临时 workaround：用HTML实体替换空格
  如果上面的方法都没法快速实施，可以临时把标签内的空格换成 ，比如：

{% image self.search_image thumbnail-400x200 as img %}
<img src="{{&nbsp;img.url&nbsp;}}" alt="{{&nbsp;img.title&nbsp;}}">

不过这个方法会让代码可读性下降，只适合临时应急。

内容的提问来源于stack exchange，提问作者Rich - enzedonline