在谷歌修饰的前元素中保留 html 字符

Preserve html characters within google-prettified pre element?

本文关键字：保留 html 字符 元素 谷歌      更新时间：2023-09-26

我试图通过google-prettify和一些jQuery将语法高亮添加到我的Tumblr博客中。

Google-prettify要求 <pre> 元素具有一类prettyprint才能突出显示语法，但由于我使用 markdown 来创建我的 Tumblr 帖子，因此我无法向我的 <pre> 元素添加类。

我的解决方案是使用此 jQuery 代码段将 prettyprint 类附加到 <pre> 元素：

<script type='text/javascript'>
$(document).ready(function() {
      $('pre').addClass('prettyprint');
      prettyPrint();
});
</script>

这工作正常，但我希望能够复制并粘贴我想在我的 Tumblr 上显示的代码，而不是每次我想发布代码片段时将所有<转换为&lt;并>转换为&gt;。

使用 jQuery，我想将所有<和>替换为相应的 html 代码，但仅限于 pre 元素。但是，这可能会有一些问题，因为它需要在代码美化之前替换所有这些问题。

我可以附加新类，替换标签，然后调用prettyPrint();来初始化所有内容吗？还是我应该在发布代码之前手动将 html 字符更改为 html实体？

小更新：此脚本适用于更改<和>，除了<body>、<html>和<head>...

<script type='text/javascript'>
$(function() {
   var $pre = $('pre');
   $pre.html($pre.html().replace(/</g, 'f').replace(/>/g, 'l'));
});
</script>
<pre>
    <html></html>
    <body></body>
    <head><head>
    <i></i>
</pre>

注意：我使用 f 作为替换只是为了测试代码。

如果先将所有与号替换为实体，然后替换小于号，则可以将返回的字符串用作<pre>中的文本节点，或任何空格设置为"pre"的块容器。

function stripX(str){
    return str.replace(/'&(?!('w+;))/g, '&amp;').replace(/</g, '&lt;');
}
相关文章：