HTML-код в теле страницы, теги pre и code

Как вывести HTML-код в контенте/тексте страницы? Тот, который внутри
<pre></pre>
или
<code></code>

TinyMCE сжирает часть кода. Пробовал prettify, но у меня почему-то вместо, например,
<p>By: Admin</p>

выводит:

<ol class="linenums">
<li class="L0">
<p>
<span class="typ">By</span>
<span class="pun">:</span>
<span class="pln"> </span>
<span class="typ">Admin</span>
</p>
</li>
</ol>

Или при написании
<pre class="prettyprint"><div style="clear:both">the text</div></pre>
html игнорируется. Что не так? Как быть вообще? Может, есть плагин какой-то?



7 комментариев

avatar
Просто pre или code, соответственно, тоже ничего не дает.
avatar
Вопрос следует разделить на два:
1) В вашем HTML-коде есть теги MODX.
2) В вашем HTML-коде нет тегов MODX.

Рассмотрю вариант 2, как более простой.

Всякие вещи типа
<span class="typ">
добавляет сам prettyprint через JavaScript. Это как раз и есть его функция — подсветка кода путем его разметки

Вы видите эти добавленные теги, потому что смотрите обработанный код страницы через Инструменты разработчика.

А если вы посмотрите Исходный код страницы необработанным через Ctrl+U или через правую кнопку мыши — там этих тегов не будет.

TinyMCE у меня ничего не сжирает, а чтобы нормально вывести HTML-код с номерами строк, я делал так:

<pre class="prettyprint linenums lang-html">тут ваш код</pre>


Почитаейте доки по Prettyprint, там сказано, что нужно также подключить CSS для преттипринт.
avatar
Как работает Преттипринт — понятно. Я так понял, что чтобы получить нужное отображение в браузере нужно или переключаться с Визуального компонента на без него или добавить свою кнопку с pre.
То есть: в Визуальном написали код, выделили и нажали кнопочку Insert/Edit Code Sample — треугольные скобки теперь выводятся с помощью мнемоников. Теперь отключаем Визуал и добавляем
<pre></pre>
.
Я привык работать без визуального компонента. Вот пример изврата текста редактором: пишу испанское слово
Escríbanos
, а при переключении на TinyMCE вижу, что í представлена теперь в виде мнемоника & i a c u t e;. В браузере — всё нормально, но это теперь нечитабельно, если нужно переключиться на код. Ну или при копировании будут проблемы.
avatar
То есть нужно или:
— пользоваться панелью TinyMCE так, чтобы в редакторе был код, но сама панель при этом присутствовала, как в WordPress. Это возможно?
— использовать плагин типа crayon-syntax-highlighter для WP, который и html-код не портит (не переводит брекеты в мнемоники), и подсветку даёт. Есть что-то подобное?
2-ой вариант, конечно, интереснее.
avatar
Нашел интересный способ:
pre class="prettyprint"><math>
<![CDATA[Заключаем коды сюда]]>
</math></pre>
Комментарий отредактирован 2017-08-26 10:51:38 пользователем Wooof
avatar
Кто возьмется за написание плагина типа Crayon Syntax Highlighter (он для WordPress)? Пишите цены в личку, если интересно. Хочется использовать просто pre безо всяких танцев с бубном.
Комментарий отредактирован 2017-10-23 15:53:27 пользователем Wooof
avatar
1. Устанавливаем prettify
Подключаем к странице prettify.css и prettify.js из архива

2. Устанавливаем плагин FixedPre

3. Код вывода:
<pre><fixedpre>Ваш код</fixedpre></pre>
Комментарий отредактирован 2023-02-24 14:34:01 пользователем stormuks
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.