Как выделить кусок кода в docpad/markdown

Я использую docpad + markdown для моего блога. Я использую плагин highlight.js для форматирования примеров кода. Форматирование работает хорошо, и ключевые слова выделены. Теперь я хочу подчеркнуть некоторые части блока кода дополнительным форматированием, например, чтобы показать изменения, которые я сделал по сравнению с предыдущим блоком.

Можно ли выделить некоторые части кодового блока, например

  • сделать вызов функции жирным
  • зачеркнуть текст
  • сделать текст красным

Вот как это выглядит в блоге Мартина Фаулера:

Пример рефакторинга Мартина Фаулера

Разница лишь в том, что я бы хотел, чтобы ключевые слова тоже выделялись.

Источник

1 ответ

Согласно списку плагинов Docpad у вас есть несколько вариантов. Я заметил два перечисленных ниже с быстрым снятием. Могут быть и другие, которые я пропустил.

  1. Highlight.js Плагин
  2. Плагин Pygments

Если вы хотите настроить внешний вид вывода, я подозреваю, что вам нужно будет отредактировать CSS, который использует любой плагин. Смотрите документацию для конкретного плагина, который вы выбираете.

Например, в документации к плагину Highligh.js указано, что вам необходимо отдельно загрузить таблицу стилей (что объясняет, почему OP не получает стилей с использованием этого плагина). Просмотрите предоставленный список и демонстрации и выберите стиль, который наилучшим образом соответствует вашему желаемому внешнему виду.

Загрузите файл CSS и сохраните в соответствующем каталоге. Как показывают документы Docpad, это было бы в src/render/styles/filename.css будучи уверенным, чтобы заменить "filename.css" на имя файла. Как утверждают документы:

Затем, чтобы включить его в наши страницы, мы обновим блок стилей в нашем макете default.html.eco:

<%- @getBlock("styles").add(["/styles/style.css"]).toHTML() %>

Опять же, обязательно используйте фактическое имя вашего файла.

Чтобы внести какие-либо корректировки в используемые цвета / стили, вам нужно будет отредактировать этот CSS-файл. Обратите внимание, что Highlight.js предоставляет список имен классов, которые вы можете использовать для стилей хуков. Найдите конкретные имена классов, которые соответствуют элементам, которые вы хотите настроить, и найдите, где этот класс стилизован в файле CSS, и редактируйте до тех пор, пока вы не будете удовлетворены.

Обратите внимание, что в приведенном выше примере предполагается, что вы используете настройки по умолчанию и плагины, как описано на странице "Начало работы" документации DocPad. YMMV.

Если вы хотите выделить изменения, вам нужно будет создать diff ваших изменений и затем определить "diff" как язык. Затем Highlight.js будет использовать подсветку diff для выделения изменений. К сожалению, невозможно выделить одновременно и язык, и разницу. Другими словами, вы можете выделить ключевые слова или выделить изменения, а не оба.

Конечно, вы всегда можете определить свой собственный "язык" и зарегистрировать его в Highlight.js. Но это выходит за рамки этого форума.

Источник
Другие вопросы по тегам