VSC | Как скопировать код с подсветкой синтаксиса в виде HTML-разметки с цветами?

На этом сайте пишу публикации и периодически вставляю кусочки кода из редакторов. Часто приходится разукрашивать синтаксические элементы языковых конструкций JavaScript.

Для небольших кодов я вручную присваиваю цвета в блоках PRE при помощи редактора публикаций WordPress.

Но на больших фрагментах кода делать разукрашивание ручным способом довольно запарно. Хочется просто взять из редактора кода visual studio code нужный фрагмент и просто скопировать его в WordPress. Как это сделать?

Я нашёл один способ. Может быть он вам поможет избежать головной боли. Способ не самый удобный, но рабочий. Вы получите 100% отображение кода в WordPress также, как вы видите его в VSC.

Шаг № 1 — Копируем код в редакторе VSC

Выделяем нужный кусок кода в самом редакторе VSC и затем копируем его в буфер обмена.

Выделили и скопировали код в редакторе VSC

Шаг № 2 — Вставляем скопированный код из VSC в новый документ MS WORD

MS WORD и VSC принадлежат компании Microsoft, а значит код вставится в новый документ идеально. Вы будете видеть ту же цветовую палитру

Вставили скопированный код из VSC в MS Word

Шаг № 3 — Сохраняем новый документ MS WORD в виде «**Веб-страница с фильтром (.htm; .html)**«

Используем правильный формат сохранения документа MS WORD

Шаг № 4 — Открываем сохранённый документ обычным Блокнотом

Вся разметка будет представлять собой стандартную структуру HTML-документа. Но нам нужно только два блока из неё, потому что мы планируем вставлять эти два размеченных цветных блока в свой документ.

Шаг № 5 — Копируем только блок style и блок div со всеми абзацами p

Нетрудно догадаться, что блок style хранит в себе общее стилевое CSS-оформление для блоков, представляющих код.

Блок div с p состоит из span’ов, которые оформляются инлайновыми стилями в виде атрибута style, без дополнительных подгружаемых файлов. Это как раз то, что нам и нужно.

Шаг № 6 — Вставляем размеченный код с инлайновыми стилями в нужную часть нашего HTML-документа

Там где у вас будут запятые в коде, может перенестись на новую строку. Но это не критично и можно быстро поправить.

Ниже пример вставленного кода:

if ( !defined( ‘CZR_MIN_PHP_VERSION’ ) ) define ( ‘CZR_MIN_PHP_VERSION’, 5.3 );

if ( !defined( ‘CZR_MIN_WP_VERSION’ ) ) define ( ‘CZR_MIN_WP_VERSION’, 4.5 );

if ( version_compare( phpversion(), CZR_MIN_PHP_VERSION, ‘<‘ ) ) {

add_action( ‘admin_notices’ , ‘czr_fn_display_min_php_message’ );

return;

}

global $wp_version;

if ( version_compare( $wp_version, CZR_MIN_WP_VERSION, ‘<‘ ) ) {

add_action( ‘admin_notices’ , ‘czr_fn_display_min_wp_message’ );