发表新帖
发表新帖

Prism HTML highlighter

后端 未结
关注
6 1246
陌清茗
陌清茗 2020-12-16 11:50

I\'m using Prism and its working well for CSS:

p { color: red }

but

相关标签:
6条回答
  • 你的背包
    2020-12-16 12:26

    I had the same problem with the HTML. I didn't want to replace the <, > with &lt &gt so what I did was put the code inside textarea-elements inside a hidden div and once the page was loaded copied the contents of all textareas to code-elements. This way I was able to keep the code as it is and render it withou issues.

    The obvious downside of course is that without JS there is no content but then again the highlighter wouldn't work either.

    0 讨论(0)
  • 不知归路
    2020-12-16 12:30

    I actually ran into same issue where i placed prism js and prism css on html page but couldn't get the highlighting. Not sure if it will be the issue with others but for me it was some global css that was set as color black for all "code","pre" tags. After i removed that color from there prism highlighting started showing. If it still doesn't work than you can follow this article Code syntax higlighter using Prism js. I couldn't see much difference but i was having issue when i placed prism js below the code i wanted to highlight. When i moved that to top it started working. If anyone have issue they can try this.

    0 讨论(0)
  • 眼角桃花
    2020-12-16 12:34

    To solve issue 1):

    You can use the unexcaped-markup plugin

    This is how it works:

    <script type="text/plain" class="language-markup">
   <p>Example</p>
</script>

    To ignore first and last returns I would recommend using the normalize whitespace plugin.

    To solve issue 2):

    There exists no languages-html see http://prismjs.com/index.html#languages-list. HTML is a HyperTextMarkupLanguage so its included in language-markup. Thats what you have to use.

    0 讨论(0)
  • 名媛妹妹
    2020-12-16 12:36

    I want to add that another very simple possibility is to use the archaic <xmp>-tag like so:

    <pre><code class="language-html">
<xmp>
  <p>this markup is now rendered as expected although your IDE might be upset about you using that old tag</p>
</xmp>
</code></pre>
    0 讨论(0)
  • 太阳男子
    2020-12-16 12:45

    Use <code class="language-markup"> to style html code.

    Also, you only need to escape the beginning of the tags with &lt;, don't worry about the &gt; characters. The easiest way is to paste your html code into the pre tag, then perform a find and replace for all < characters.

    This should work:

    <!DOCTYPE html>
<html>
    <head>
        <link href="prism.css" rel="stylesheet" />
    </head>
    <body>
        <script src="prism.js"></script>
        <pre><code class="language-markup">
            &lt;p class="red">red text &lt;/p>
        </code></pre>
    </body>
</html>
    0 讨论(0)
  • 被撕碎了的回忆
    2020-12-16 12:49

    The best solution is to save the html you want highlighted into a seperate file. You'll need to include the file highlight plugin into your js.

    The syntax highlighting will be worked out from the extension

    <pre data-src="assets/partials/picture.html"></pre>
    0 讨论(0)
 看不清?
提交回复
热议问题