В заметках частенько требуется вставить какой либо фрагмент исходного кода или 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, например:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
Комментариев нет:
Отправить комментарий