Если вы запускаете технический блог, вполне вероятно, что вы хотите поделиться некоторыми кодовыми снептами. Синтаксическое выделение является почти обязательным для того, чтобы сделать любой общий код читаемым для вашей аудитории. Существуют разные решения для интеграции синтаксиса в приложение Rails – я быстро покажу, как интегрировал Призма в этот блог.
Первым шагом для получения синтаксиса для фрагментов кода является использование правильных тегов HTML. Обычно рекомендуется добавить ваши фрагменты в
block ...
Далее мы добавим подсветку кода с призмой библиотеки JavaScript. Есть и другие варианты (такие как hightjs ), но Prism была самой быстрой, чтобы запустить это приложение блога Rails.
Сначала мы добавляем призму через менеджер пакетов пряжи: пряжа добавить prismjs Анкет
Затем мы добавляем плагин в наш Babel.config.js и определите языки, которые мы хотим импортировать:
plugins: [
["prismjs", {
"languages": [ "css", "ruby"]
}],
Вы можете найти список Поддерживаемые языки на сайте Prism.
Наконец, чтобы загрузить скрипт после загрузки страницы, мы обновляем наш Application.js :
import Prism from 'prismjs'
document.addEventListener("turbo:load", function() {
Prism.highlightAll();
});
Если ваше приложение работает Turbolinks Вместо Турбо вам нужно изменить "Turbo: Load" к "Turbolinks: Load" Анкет
Этого должно быть достаточно, чтобы получить основной синтаксис, выделяющий работу! Теперь вы можете настроить свою интеграцию:
Вы можете Добавить пользовательский стиль Просто переопределяя стиль темы в ваших файлах CSS, например, Чтобы изменить цвет фона:
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #334155 !important;
}
Вы можете Добавить пользовательские темы через репозиторий Prism-Themes. Добавить плагин через пряжа добавить Prism-Themes и импортировать соответствующую тему в вашем Application.scss с @Import "Prism-Themes/Themes/Prism-Dracula.css"; Анкет Этот блог использует слегка настраивает версию Дракула тема.
Оригинал: “https://dev.to/jerryweyer/adding-syntax-highlighting-to-a-rails-app-with-prismjs-2n4k”