Дорабатываем bashblog напильником, часть вторая

Дорабатываем bashblog напильником, часть вторая - подсветка синтаксиса

2018-10-12 00:41:54 — Evgeniy Shumilov

Думаю, следует сразу предупредить, что я далеко не специалист в html, вёрстке по сетке, css, javascript и прочем кунг-фу из области визуализации веб контента, так что всё, что здесь изложено может оказаться далёким от best practice. Итак, есть задача - получить возможность добавлять в посты блога секции с кодом. Из хотелок - подсветка синтаксиса для разных языков и опциональный скроллбар, если текст не входит в поле по ширине.

Немного помучав гугл, я нашёл решение под вполне очевидным названием highlight.js. Для работы фактически требуется два файла - сам js скрипт и css файл со стилями. По адресу https://highlightjs.org/download/ есть простой визард, который позволяет выбрать нужные нам языки, для которых будет работать подсветка синтаксиса. В корне блога я создал директорию с именем assets, в которую буду помещать различные скрипты, стили и всё прочее. Соответственно, директория, в которую я распаковал содержимое скачанного архива имеет относительный путь /assets/highlight.

Добавляем подгрузку скриптов

Первым делом нужно добавить в тег head каждой страницы подгрузку js скрипта. В нашем случае это можно сделать с помощью отдельного header файла. Просто берём любой из html файлов ранее созданных статей или сгенерированных файлов с тегами и копируем из них всё с начала и до вхождения тега <title>, а затем сохраняем в отдельный файл header.tpl. В конец этого же файла дописываем следующее:

<script src="assets/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Теперь прописываем header в файл .config:

header_file="header.tpl"

Подключаем CSS

В том же файле .config прописываем все css, которые мы используем, вместе с highlight их получается три:

css_include=('main.css' 'blog.css' 'assets/highlight/styles/default.css')

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

Добавляем scrollbar

Для того, чтобы длинные строки кода не уходили за границы блока, имеет смысл добавить scrollbar, появляющийся при необходимости. Для этого в blog.css добавляем следующее:

        pre {overflow:auto;background:#222222;}
                ::-webkit-scrollbar {width:10px;height:10px;}
                ::-webkit-scrollbar-track {background:#333;}
                ::-webkit-scrollbar-thumb {background:#787A19;}
                ::-webkit-scrollbar-thumb:hover {background:#B2B525;}

К сожалению изменение цвета скроллбара будет работать только для браузеров, построенных на webkit.

Использование

Типичный пример блока кода:

<pre><code class="bash">
#!/bin/sh

pwg() {
    [ -z "$1" ] && l="8" || l="$1"
    tr -dc A-Za-z0-9 < /dev/urandom | head -c "$l" | xargs
}


for r in `seq 1 10`; do
    ln=''
    for c in `seq 1 10`; do
        ln="$(echo "$ln   "`pwg $1`)"
    done
    echo "$ln"
done
</code></pre>

И результат:

#!/bin/sh

pwg() {
    [ -z "$1" ] && l="8" || l="$1"
    tr -dc A-Za-z0-9 < /dev/urandom | head -c "$l" | xargs
}


for r in `seq 1 10`; do
    ln=''
    for c in `seq 1 10`; do
        ln="$(echo "$ln   "`pwg $1`)"
    done
    echo "$ln"
done

Небольшая доработка

При добавлении блоков кода на шелле обнаружил, что в библиотеке добавлены только внутренние команды шелла, например, cd там есть, а mkdir - нет. Исправить это несложно. Открываем в текстовом редакторе файл assets/highlight/highlight.pack.js, ищем слово "bash" и смотрим чуть дальше по тексту - там идёт набор литералов в строке, разделённым пробелом, куда можно добавить свои.

На этом на сегодня всё.

Теги: bashblog, web, shell

Зайчатки разума