В заметках частенько требуется вставить какой либо фрагмент исходного кода или shell команды и чтобы это было удобно читать необходимо код отформатировать и сделать подсветку синтаксиса.
Один из самых "хардкорных" вариантов, например - использовать редактор SciTE. Для этого необходимо исходник открыть/вставить в SciTE и экспортировать его как HTML (File - Export - As HTML...) Затем открыть полученный HTML код и взять из него раздел со стилями <style> .. </style> и весь текст из тега <body> и вставить в блоге в режиме HTML редактирования. Все.
Пример как будет выглядеть код:
SELECT first_name,
salary,
CASE
WHEN salary < 5000 THEN 'Low'
WHEN salary >= 5000 AND salary < 10000 THEN 'Normal'
WHEN salary >= 10000 THEN 'High'
ELSE 'Unknown'
END
salary_level
FROM employees;
salary,
CASE
WHEN salary < 5000 THEN 'Low'
WHEN salary >= 5000 AND salary < 10000 THEN 'Normal'
WHEN salary >= 10000 THEN 'High'
ELSE 'Unknown'
END
salary_level
FROM employees;
Вроде бы неплохо, НО... мелокавато, шрифт не моноширный, да и вообще пляшет, поэтому отступы "уехали". Это потому, что SciTE делает экспорт шрифтом font-family: 'Bitstream Vera Sans Mono', которого с вероятностью 99.(9)% не будет в системе и поэтому браузер его заменяет на дефолтный, да и в стилях почему-то размер так же прыгает. Если заменить шрифт на стандартный моноширный - font-family: 'Courier New'; и во всех стилях проставить одинаковый размер, то выглядит уже лучше:
SELECT first_name,
salary,
CASE
WHEN salary < 5000 THEN 'Low'
WHEN salary >= 5000 AND salary < 10000 THEN 'Normal'
WHEN salary >= 10000 THEN 'High'
ELSE 'Unknown'
END
salary_level
FROM employees;
salary,
CASE
WHEN salary < 5000 THEN 'Low'
WHEN salary >= 5000 AND salary < 10000 THEN 'Normal'
WHEN salary >= 10000 THEN 'High'
ELSE 'Unknown'
END
salary_level
FROM employees;
Но все эти манипуляции неудобны и есть альтернатива - online-сервис - hilite.me , выполняющий по сути тоже самое, только все в окне браузера, не надо сохранять и открывать файл, все операции сводятся к copy-past, кроме того есть разные стили оформления. Пример как будет выглядеть код:
SELECT first_name, salary, CASE WHEN salary < 5000 THEN 'Low' WHEN salary >= 5000 AND salary < 10000 THEN 'Normal' WHEN salary >= 10000 THEN 'High' ELSE 'Unknown' END salary_level FROM employees;
И я первоначально использовал этот сервис, но blogger почему-то !? (наверно самый умный!?) при переключении режима редактирования статьи (HTML < > Режим верстки) исправляет стили блока <div> сгенерированного HMTL кода подсветки исходника и рамка выделяющая блок портится, приходится постоянно исправлять стили перед очередным сохранением. Кроме того сгенерированный HTML код что в SciTE, что в hilite абсолютно неудобен к восприятию в режиме HTML верстки т.к. каждое ключевое слово, знак препинания и пр. оборачивается в тег <span> со стилями и превращается в "простыню" которую неудобно читать/понимать/редактировать - при изменении исходника необходимо заново генировать HTML код, кроме того эта "простыня" сильно увеличивается в объеме при увеличении размера исходника.
Следующий вариант - использовать JavaScript. Blogger позволяет подключать внешние библиотеки CSS и Javascript и использовать вставки и виджеты JavaScript, поэтому можно использовать какую либо внешнюю библиотеку для подсветки синтакиса. Была найдена highlight.js, которую можно подключать с внешних CDN источников. С использованием этой библиотеки исходный код может выглядеть уже так:
SELECT first_name,
salary,
CASE
WHEN salary < 5000 THEN 'Low'
WHEN salary >= 5000 AND salary < 10000 THEN 'Normal'
WHEN salary >= 10000 THEN 'High'
ELSE 'Unknown'
END
salary_level
FROM employees;
При этом вставка исходного кода выглядит предельно просто и лаконично, легко читается, можно редактировать прямо в окне редактирования статьи.
<pre><code class="language-sql">
SELECT first_name,
salary,
CASE
WHEN salary < 5000 THEN 'Low'
WHEN salary >= 5000 AND salary < 10000 THEN 'Normal'
WHEN salary >= 10000 THEN 'High'
ELSE 'Unknown'
END
salary_level
FROM employees;
</code></pre>
<-- подключение highlight.js -->
<link href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/styles/stackoverflow-light.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/highlight.min.js"></script>
<-- запуск процедуры подсветки блоков с иходниками -->
<script>hljs.highlightAll();</script>
Все варианты источников с CDN можно посмотреть здесь. Список поддерживаемых языков здесь. Так же возможны различные стили подсветок, можно посомтреть на CDN jsdelivr. Документация. Проект на GitHub.
Так же можно добавить рамку как и в hilite просто опишем в CSS свой класс и добавим его к тегу <code>
<style>
.boxshadow {
border:solid gray;
border-width:.1em .1em .1em .8em;
-webkit-box-shadow: 2px 2px 4px 1px rgba(34, 60, 80, 0.2);
-moz-box-shadow: 2px 2px 4px 1px rgba(34, 60, 80, 0.2);
box-shadow: 2px 2px 4px 1px rgba(34, 60, 80, 0.2);
}
</style>
<pre><code class="language-sql boxshadow">
...
...
Блок с кодом будет выглядеть уже так:
SELECT
first_name,
salary,
CASE
WHEN salary < 5000 THEN 'Low'
WHEN salary >= 5000 AND salary < 10000 THEN 'Normal'
WHEN salary >= 10000 THEN 'High'
ELSE 'Unknown'
END
salary_level
FROM employees;
Еще как вариант, для вставки фрагментов исходного кода можно использовать вставку Gist с GitHub Gist, например:
Комментариев нет:
Отправить комментарий