Prism HTML маркер

Използвам Prism и работи добре за CSS:

<pre><code class="language-css">p { color: red }</code></pre>

но не мога да го накарам да работи за html:

<pre><code class="language-html"><p class="red">red text</p></code></pre>

Имам 2 проблема:

  1. < и > са представени като тагове, а не като текст, но мога да го заменя с &lt; и &gt;

  2. По-важното е, че дори заменен, както е показано в проблем 1, хайлайтерът няма да подчертае никакъв код и всичко е просто черно. Въпреки че работи за CSS, целият код изглежда така:

<!DOCTYPE html>
<html>
    <head>
        <link href="/bgprism.css" rel="stylesheet" />
    </head>
    <body>
        <script src="prism.js"></script>
        <pre><code class="language-css">p { color: red }</code></pre>
    </body>
</html>

Благодаря за всяка помощ.


html syntax-highlighting prism.js
person kajacx    schedule 28.01.2013    source източник

Отговори (7)


arrow_upward
51
arrow_downward

Използвайте <code class="language-markup"> за стилизиране на html кода.

Освен това трябва само да избягвате началото на таговете с &lt;, не се притеснявайте за знаците &gt;. Най-лесният начин е да поставите своя html код в предварително етикета, след което да извършите търсене и замяна за всички < знака.

Това трябва да работи:

<!DOCTYPE html>
<html>
    <head>
        <link href="/bgprism.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>
person Nathan Jones    schedule 25.03.2013
comment
О, човече, всички тези html обекти създават някакъв грозен изходен код... Някой знае ли защо Prismjs прави всичко възможно, за да премахне html тагове? Дали това е опция, която може да бъде зададена на true или false... - person Jet Blue; 05.05.2015
comment
nm, видях този разговор в Github... не е нещо на Prism, но е поради етикета ‹pre›... - person Jet Blue; 05.05.2015
comment
Според моите разбирания ‹pre› таг поддържа вградени html тагове. Как не е проблема с призмата? - person Stan Bashtavenko; 30.07.2015
comment
Или можете да поставите кода, който искате да маркирате, във файл и да заредите призмата, да го маркирате от файла и да го инжектирате в страницата. - person steviesama; 28.05.2016
comment
Обслужвам обикновен HTML и го прекъсвам с JavaScript. В комбинация с разкрасител се получава доста добре. Намирам това за особено полезно, когато искам да видя както кода, така и изобразен пример, като клонирам примера и го поставя в тагове <pre><code class="language-markup">. - person MCTaylor17; 09.09.2016
comment
Друг начин за обработка на HTML синтаксиса е да обвиете вашия HTML код в <script type="prism-html-markup"></script>, както е предложено тук: stackoverflow.com/a/27495949/1097123. Мисля, че е много по-добре от замяната на < с &lt; - person kimbaudi; 30.01.2017

arrow_upward
4
arrow_downward

За да разрешите проблем 1):

Можете да използвате добавка за unexcaped-markup

Ето как работи:

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

За да пренебрегнете първото и последното връщане, бих препоръчал да използвате приставката за нормализиране на интервали.

За решаване на проблем 2):

Не съществува languages-html вижте http://prismjs.com/index.html#languages-list. HTML е HyperTextMarkupезик, така че е включен в language-markup. Това е, което трябва да използвате.

person Adam    schedule 09.01.2018

arrow_upward
2
arrow_downward

Имах същия проблем с HTML. Не исках да заменя ‹, > с < >, така че това, което направих, беше да сложа кода в textarea-elements вътре в скрит div и след като страницата беше заредена, копирах съдържанието на всички текстови полета в code-elements. По този начин успях да запазя кода такъв, какъвто е, и да го изобразя без проблеми.

Очевидният недостатък, разбира се, е, че без JS няма съдържание, но след това отново маркерът също няма да работи.

person Hardev    schedule 24.03.2016
comment
Не е нужно да замествате < и > с &lt; и &rt;. Просто увийте своя html код в <script type="prism-html-markup"></script>. Разгледайте stackoverflow.com/a/27495949/1097123 - person kimbaudi; 30.01.2017

arrow_upward
1
arrow_downward

Най-доброто решение е да запазите html, който искате да бъде подчертан, в отделен файл. Ще трябва да включите приставката за осветяване на файлове във вашия js.

Осветяването на синтаксиса ще бъде разработено от разширението

<pre data-src="assets/partials/picture.html"></pre>
person steve    schedule 28.07.2016

arrow_upward
1
arrow_downward

Искам да добавя, че друга много проста възможност е да използвате архаичния <xmp>-таг по следния начин:

<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>
person oehmaddin    schedule 27.11.2020

arrow_upward
0
arrow_downward

Всъщност се сблъсках със същия проблем, при който поставих prism js и prism css на html страница, но не можах да получа подчертаването. Не съм сигурен дали това ще е проблемът с други, но за мен това беше някакъв глобален css, който беше зададен като черен цвят за всички кодове, предварително тагове. След като премахнах този цвят от там, подчертаването на призмата започна да се показва. Ако все още не работи, можете да следвате тази статия Маркиране на синтаксиса на кода с помощта на Prism js. Не можах да видя голяма разлика, но имах проблем, когато поставих prism js под кода, който исках да подчертая. Когато го преместих отгоре, започна да работи. Ако някой има проблем, може да опита това.

person Shubham    schedule 12.12.2020

arrow_upward
0
arrow_downward

Мисля, че отговорът на Адам трябва да бъде най-доброто решение в този случай. Просто разказвам повече за използването на приставката za unexcaped-markup, за да направи HTML маркера в най-простият начин.

Тъй като ‹script /› ще работи само на един ред код, следователно може да искате да вмъкнете прост HTML-коментар, за да избегнете всичките си кодове:

<pre class="language-markup"><code><!--
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
--></code></pre>

Всичко вътре в коментара ще бъде отпечатано красиво. Струва си да опитате, ако трябва да отпечатате своя HTML маркировка с помощта на Prism.

person lewishole    schedule 21.07.2021