Підсвічування коду - Ghost

Volodymyr Lavrynovych

Apr 6, 2024 — 4 min read

Вступ

Привіт. Вже не в одному моєму дописі є куски коду, які виглядають доволі блідо на фоні іншого контенту, а також непривабливо у порівнянні з будь яким іншим сайтом, де є хоч якась підсвітка кода. Сьогодні ми це виправимо.

Ghost блог має підтримку коду, але я би сказав, що наполовину. Чому? Бо з одного боку ви можете додати в публікацію спеціальну секцію з кодом, і навіть вказати мову програмування, але це ніяк не вплине на вигляд. Воно буде сіреньке

Візьмемо оцей кусок кода за основу сьогодні. Так він виглядає для читачів у моєму дописі про теги.

А так у редакторі автора. І зверніть увагу, що я вказую мову програмування, яка мала би впливати на підсвітку синтаксису. От поки я редагую ще є підсвітка, а коли код публікується, то все сіре.

Давайте виправляти разом. Для цього скористаємось https://prismjs.com/

Підключення Prism

Prism - це легкий, засіб для виділення синтаксису, розроблений з урахуванням сучасних веб-стандартів. Він використовується на мільйонах веб-сайтів, включаючи ті, які ви відвідуєте щодня.

Якщо коротко, то нам потрібно підключити до нашого блогу файли javascript та css. І на це є два способи:

Викачати файли, скопіювати в каталог з нашим блогом на сервері і додати в header сторінки, змінивши відповідний файл
Підключити публічну версію з CDN (Content Delivery Network) через code injection досупний для адміністратора.

І от у першому варіанті перевага в тому, що навіть якщо Prism коли-небудь зникне разом з усіма серверами CDN, то ваш блог все ще матиме підсвітку коду, бо всі необхідні файли зберігатимуться у вас на сервері, але це трохи складніше, порівнюючи з другим підходом, плюсом якого є легкість підключення і оновлення до новіших версій в подальшому.

Як показує мій досвід в програмуванні, то для чогось мега вижливого треба обирати перший варіант, але блог - це зазвичай щось менш серьозне в моєму розумінні, тому так сильно морочитись я особисто не став. Мені потрібен результат, а найшвише його досягти буде за допомогою другого способу.

Підготовка кода

З поміж різних CDN (cdnjs, jsDelivr та UNPKG) я обрав cdnjs

Ось посилання на PrismJS 1.29.0, на момент написання цієї публікації це є остання версія: https://cdnjs.com/libraries/prism/1.29.0

Ось перелік речей, які нам потрібні:

Theme - Prism має декілька кольорових схем або тем. Тут ви вільні обирати інші або навіть створити власну.
Core - ядро бібліотеки Prism, що забезпечує базову роботу. Має використовуватись з Autoloader або ж вам потрібно поміняти на версію з потрібними мовами (програмування)
Autoloader - Prism рекомендує використовувати autoloader, який автоматично підгрузить саме ті мови, які потрібно

А ось і відповідні файли:

А тепер заготовляємо код який ми будемо потім вставляти в наш блог. Копіюємо його все з того ж посилання cdnjs.com/libraries/prism, натискаючи на відповідну іконку </>.

<!-- Prism Theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Prism Core --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Prism Autoloader -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Code Injection

Коли все зібрано, то переходимо на сторінку налаштувань вашого блогу як адміністратор, а в меню зліва шукаємо Code Injection і нажимаємо на кнопку Open

❗

А тепер важлива річ полягає в тому, що стилі (css) ми маємо додати в розділ Site header, а скрипти в розід Site footer, а також тут дуже важливен порядок скриптів. Першим має будти Core, а вже після Autoloader

Додаю наглядні приклади для вас