VSC | Как скопировать код с подсветкой синтаксиса в виде HTML-разметки с цветами?
На этом сайте пишу публикации и периодически вставляю кусочки кода из редакторов. Часто приходится разукрашивать синтаксические элементы языковых конструкций JavaScript.
Для небольших кодов я вручную присваиваю цвета в блоках PRE при помощи редактора публикаций WordPress.
Но на больших фрагментах кода делать разукрашивание ручным способом довольно запарно. Хочется просто взять из редактора кода visual studio code нужный фрагмент и просто скопировать его в WordPress. Как это сделать?
Я нашёл один способ. Может быть он вам поможет избежать головной боли. Способ не самый удобный, но рабочий. Вы получите 100% отображение кода в WordPress также, как вы видите его в VSC.
Шаг № 1 — Копируем код в редакторе VSC
Выделяем нужный кусок кода в самом редакторе VSC и затем копируем его в буфер обмена.
Шаг № 2 — Вставляем скопированный код из VSC в новый документ MS WORD
MS WORD и VSC принадлежат компании Microsoft, а значит код вставится в новый документ идеально. Вы будете видеть ту же цветовую палитру

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

Шаг № 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’ );
if ( version_compare ( $wp_version , CZR_MIN_WP_VERSION, ‘
add_action ( ‘admin_notices’ , ‘czr_fn_display_min_wp_message’ );
Как оформить код в Word для курсача? [закрыт]
Закрыт. На этот вопрос невозможно дать объективный ответ. Ответы на него в данный момент не принимаются.
Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы на него можно было дать ответ, основанный на фактах и цитатах.
Закрыт 8 лет назад .
Как можно красиво оформить исходный код на языке си для курсовой работы в ворде, которую потом буду печатать?
Отслеживать
32k 19 19 золотых знаков 79 79 серебряных знаков 105 105 бронзовых знаков
задан 24 фев 2014 в 19:05
ВладиславМСК ВладиславМСК
1,551 11 11 золотых знаков 38 38 серебряных знаков 59 59 бронзовых знаков
Напишите кто-то, что то типа: Просто нужно код из Visual Studio скопировать в MS Word, подсветка кода будет автоматическая. Выберу правильным ответом.
19 апр 2014 в 9:21
>Напишите кто-то, что то типа: Просто нужно код из Visual Studio скопировать в MS Word, подсветка кода будет автоматическая. Выберу правильным ответом если у вас есть, как вы считаете, верный ответ (и вопрос, очевидно, уже не актуален), то зачем вам нужно, чтобы кто-то здесь формально отписался? Вы, извините за выражение, занимаетесь кармадрочерством и выпрашиваете ответ, чтобы принять его и получить два очка кармы? В любом случае у вас есть ответ @KoVadim, можете принять его
19 апр 2014 в 9:28
Просто это самый рабочий способ. Ответ пользователя @KoVadim не всегда срабатывает и трубет лишних движений. Я заинтересован в том, что бы люди видели удобные способы, видимо Вы иного мнения. Ваше право.
19 апр 2014 в 18:08
Последний раз, когда я пробовал вставлять код с студии в ворд, никакой подсветки автоматом не было. Возможно, это последние версии такое умеют.
19 апр 2014 в 18:51
Набрел на этот вопрос из любопытства, не будут ли говорить, что код «для раздувания курсовой». Я решил проблему форматирования так — я пишу курсовую на Markdown + CSS. Это позволяет с одной стороны получше выучить CSS, с другой стороны без проблем писать курсовую в Emacs.
Как оформить программный код (С++) в Microsoft Word?
Есть программный код на C++, который необходимо вставить в отчет по работе в Word 2013.
Но если напрямую вставлять его — то получается совершенно не читаемая белиберда.
Хочется оформить так, как код выглядит в компиляторе — с номерами строк, правильным форматированием и подсветкой синтаксиса.
Встроенных средств для этого я не нашел. Подскажите, как это можно сделать?
- Вопрос задан более трёх лет назад
- 116115 просмотров
4 комментария
Оценить 4 комментария
AlexP11223 @AlexP11223
А зачем номера строк? У меня и в IDE отключены они.
Батенька, а вам не кажется, что здесь про микроскоп фраза ой как уместна… Хотя, даже не она, а немного другая!
Латех осилить сложно что ли?
Какую IDE среду вы используете для написания кода?
Артем Сорокин @artyums Автор вопроса
Я использую Embarcadero RAD Studio XE4
Решения вопроса 1
phil_tsarik @phil_tsarik
Встроенных средств для этого я не нашел
Как так? Создаете свой стиль, там настраивайте шрифт, отступы, табуляцию и тд. Вставляете текст и применяете к нему ваш стиль. Подстветка останется, если в стиле не переопределять цвет шрифта.
С номерами строк придется труднее — надо будет настроить свой стиль нумерации, и в созданном выше стиле абзаца указать, чтобы использовать эту нумерацию.
Например, можно добиться вот таких результатов
Как сохранить оригинальную расцветку вашего кода из Visual Studio в публикации на Хабрахабр. Сравниваем расцветки. Опрос
Привет, хабраюзер! В этом посте я расскажу, как можно сделать свой код на Хабре более «живым» благодаря простому способу сохранения его оригинальной цветовой схемы. А также предлагаю сравнить различные варианты расцветки кода.
Предисловие
Сейчас я нахожусь в процессе написания своей первой статьи для Хабра про веб-сервисы. И с самого начала решил, что исходные коды буду подсвечивать сторонним хабра-хайлайтером, так как стандартный тег по моему мнению не дает качественного эффекта подсветки синтаксиса. Однако я обнаружил только один альтернативный хайлайтер — http://highlight.hohli.com. Результат его расцветки меня, к сожалению, не воодушевил. В конце поста я его показываю в числе 6 вариантов расцветки для непосредственного сравнения. Когда-то раньше был еще один хайлатер — Source Code Highlighter, описанный на Хабре тут и тут, но он уже давно не работает. Тут я вспомнил, что код из Visual Studio полностью сохраняет свой вид при копировании в Word, этот нехитрый прием и стал основой моего метода.
Метод
Идея проста: код копируется в Word, документ сохранятся как html веб-страница и функция преобразует html код в хабра-совместимый. Рассмотрим на примере. Этот простой код при сохранении дает следующее содержимое , где синим цветом я обозначил все теги , розовым – цвет стиля, а коричневым – сам отображаемый текст.
private void Hello() <
MessageBox .Show( «Hello Habrahabr!» );
>
Hello.htm
normal;mso-layout-grid-align:none;text-autospace:none’> style=’font-size:9.5pt;font-family:Consolas; color:black ;background:white;
mso-highlight:white;mso-ansi-language:EN-US’ > style=’mso-spacerun:yes’ > lang=EN-US style=’font-size:9.5pt;font-family:Consolas; color:blue ;background:
white;mso-highlight:white;mso-ansi-language:EN-US’ > private lang=EN-US style=’font-size:9.5pt;font-family:Consolas; color:black ;background:
white;mso-highlight:white;mso-ansi-language:EN-US’ > style=’font-size:9.5pt;font-family:Consolas; color:blue ;background:white;
mso-highlight:white;mso-ansi-language:EN-US’ > void style=’font-size:9.5pt;font-family:Consolas; color:black ;background:white;
mso-highlight:white;mso-ansi-language:EN-US’ > Hello()
normal;mso-layout-grid-align:none;text-autospace:none’> < span lang=EN-US
style=’font-size:9.5pt;font-family:Consolas; color:black ;background:white;
mso-highlight:white;mso-ansi-language:EN-US’> style=’mso-spacerun:yes’> < span
lang=EN-US style=’font-size:9.5pt;font-family:Consolas; color:#2B91AF ;
background:white;mso-highlight:white;mso-ansi-language:EN-US’> MessageBox span > < span
lang=EN-US style=’font-size:9.5pt;font-family:Consolas; color:black ;background:
white;mso-highlight:white;mso-ansi-language:EN-US’> .Show( lang=EN-US style=’font-size:9.5pt;font-family:Consolas; color:#A31515 ;
background:white;mso-highlight:white;mso-ansi-language:EN-US’ >"Hello
Habrahabr !& quot ; font-family:Consolas; color:black ;background:white;mso-highlight:white;
mso-ansi-language:EN-US’> style=’font-size:9.5pt;line-height:115%;font-family:Consolas; color:black ;
background:white;mso-highlight:white’ > >
Как видим, каждая строка исходного кода преобразуется в тег , внутри которого с помощью вложенных тегов производится форматирование текста, а его цвет хранится в атрибуте style. Становится ясен алгоритм преобразования: для каждого тега из «/html/body/div/p» произвести рекурсивную трансляцию его содержимого в новый html документ, попутно с помощью тега устанавливая цвет текста. Под спойлером приведен полный исходный код получившегося метода, который выглядит в соответствии с моей оригинальной цветовой схемой. Для работы с html использована библиотека Html Agility Pack.
HabraCodeFormatter.cs
- using System;
- using System.IO;
- using HtmlAgilityPack;
- namespace HabraCode
- public static class HabraCodeFormatter
- const char spaceClassic = ( char )32;
- const char spaceNbsp = ( char )160;
- public static void Format ( string fileHtm, bool withLineNumbers = false )
- var info = new FileInfo (fileHtm);
- string destFile = info. DirectoryName + «\\» + info. Name . Replace (info. Extension , null ) + «_result.txt» ;
- Format (fileHtm, destFile, withLineNumbers);
- >
- public static void Format ( string fileHtm, string fileDest, bool withLineNumbers = false )
- var doc = new HtmlDocument ();
- doc. Load (fileHtm);
- var nodes = doc. DocumentNode . SelectNodes ( «/html/body/div/p» );
- int spacesToDelete = getSpacesToDelete (nodes[0]);
- var result = new HtmlDocument ();
- var rootNode = result. CreateElement ( «blockquote» );
- result. DocumentNode . AppendChild (rootNode);
- if (withLineNumbers)
- var nodeOl = result. CreateElement ( «ol» );
- rootNode. AppendChild (nodeOl);
- rootNode = nodeOl;
- >
- foreach ( var node in nodes)
- if (withLineNumbers)
- var nodeLi = doc. CreateElement ( «li» );
- nodeLi. AppendChildren (node. ChildNodes );
- node. RemoveAllChildren ();
- node. AppendChild (nodeLi);
- >
- int refSpaces = spacesToDelete;
- translateNode (node, rootNode, ref refSpaces);
- rootNode. AppendChild (result. CreateTextNode ( Environment . NewLine ));
- >
- result. Save (fileDest);
- >
- private static int getSpacesToDelete ( HtmlNode node)
- for ( int index = 0; index < node. InnerText . Length ; index++)
- if (! isSpace (node. InnerText [index]))
- return index;
- >
- >
- return 0;
- >
- private static void translateNode ( HtmlNode node, HtmlNode destParent, ref int spacesToDelete)
- HtmlNode destNode = destParent;
- switch (node. Name )
- case «o:p» :
- case «p» :
- break ;
- case «span» :
- string color = getColor (node);
- if (color != null )
- destNode = destParent. OwnerDocument . CreateElement ( «font» );
- destNode. SetAttributeValue ( «color» , color);
- >
- break ;
- case «#text» :
- string text = translateText (node. InnerText , ref spacesToDelete);
- destNode = destParent. OwnerDocument . CreateTextNode (text);
- break ;
- case «b» :
- case «li» :
- destNode = destParent. OwnerDocument . CreateElement (node. Name );
- break ;
- default :
- throw new InvalidOperationException ( «Unexpected node.Name » + node. Name );
- >
- if (! ReferenceEquals (destNode, destParent))
- destParent. ChildNodes . Add (destNode);
- >
- if (node. HasChildNodes )
- foreach ( HtmlNode child in node. ChildNodes )
- translateNode (child, destNode, ref spacesToDelete);
- >
- >
- >
- private static string translateText ( string text, ref int spaces)
- if ( string . IsNullOrEmpty (text))
- return text;
- >
- text = text. Replace ( «http://» , «http://» );
- text = text. Replace ( «\r\n» , » » );
- if (spaces >0 && text. Length >= spaces && isSpace (text. Substring (0, spaces)))
- text = text. Remove (0, spaces);
- spaces = 0;
- >
- text = text. Replace ( spaceClassic . ToString (), » » );
- text = text. Replace ( spaceNbsp . ToString (), » » );
- return text;
- >
- private static bool isSpace ( char ch)
- return (ch == spaceClassic || ch == spaceNbsp );
- >
- private static bool isSpace ( string text)
- foreach ( char ch in text)
- if (! isSpace (ch))
- return false ;
- >
- >
- return true ;
- >
- private static string getColor ( HtmlNode node)
- var attr = node. Attributes [ «style» ];
- if (attr == null || attr. Value == null )
- return null ;
- >
- string [] values = attr. Value . Split ( new [] < ';' >);
- foreach ( string value in values)
- const string prefixColor = «color:» ;
- string trimmed = value. Trim ();
- if (trimmed. StartsWith ( prefixColor ))
- return trimmed. Remove (0, prefixColor . Length );
- >
- >
- return null ;
- >
- >
- >
Вероятно, многие назовут мою расцветку кода слишком пестрой, и потому неудобной, однако она ощутимо улучшает мой процесс работы с исходным кодом. Это очень простой способ немного повысить свою эффективность. Немного прокомментирую код. Класс содержит две перегрузки метода Format, где обязательным параметром является путь до исходного html файла, а необязательным – флаг добавления номеров строк. Вторая перегрузка позволяет явно указать конечный файл, иначе результат будет сохранен как [исходное_имя]_result.txt. Метод getSpacesToDelete позволяет найти количество начальных пробелов в первой строке, чтобы удалить их во всех последующих строках.
Настройка шрифта и расцветки исходного кода в Visual Studio производится в меню Tools > Options > Environment > Fonts and Colors. Однако изначально в нем вообще отсутствует возможность установить свой цвет для метода или свойства. Но если вы пользуетесь ReSharper’ом, такая возможность появляется. Для этого в меню ReSharper > Options > Code Inspection > Settings необходимо включить пункт Color identifires. И вот тут можно испытать легкий когнитивный диссонанс, потому что методы станут бирюзового цвета – такой цвет имеют классы в традиционной схеме, а классы станут темно-синими — все это можно увидеть ниже, где я сравниваю расцветки.
В моей схеме классы, ключевые слова и другие элементы имеют классический цвет, но к ним добавляются свои цвета для методов и свойств. Для тех, кто хочет ее попробовать, привожу настройку. Сохраните xml под спойлером как файл с расширением .vssettings в кодировке UTF-8 без BOM, например, HabraCode.vssettings, и сделайте импорт настройки через меню Tools > Import and Export Settings > Import. Кодировку можно задать, например, с помощью Notepad++. По умолчанию мастер также попутно сохраняет все ваши текущие настройки – для возможности отката изменений. После импорта шрифт будет сброшен на дефолтный, и если у вас был кастомный, его надо будет указать заново. Также в настройке «Plain Text» я слегка снизил белизну фону, уменьшив с абсолютной до #FAFAFA.
HabraCode.vssettings
2
Сравнение
Теперь я предлагаю сравнить 6 вариантов расцветки кода на примере одного из методов. Нельзя утверждать, что какая-то расцветка в принципе лучшая, потому что, как известно, на вкус и цвет товарищей нет. Но меня интересует коллективное мнение хабра-сообщества.
private static string getColor(HtmlNode node) < var attr = node.Attributes["style"]; if (attr == null || attr.Value == null)< return null; >string[] values = attr.Value.Split(new [] ); foreach (string value in values) < const string prefixColor = "color:"; string trimmed = value.Trim(); if (trimmed.StartsWith(prefixColor))< return trimmed.Remove(0, prefixColor.Length); >> return null; >
2. Черно-белый код (получен через HabraCodeFormatter с отбросом цвета и bold’а)
private static string getColor(HtmlNode node) var attr = node.Attributes[«style»];
if (attr == null || attr.Value == null) return null;
>
string[] values = attr.Value.Split(new [] );
foreach (string value in values) const string prefixColor = «color:»;
string trimmed = value.Trim();
if (trimmed.StartsWith(prefixColor)) return trimmed.Remove(0, prefixColor.Length);
>
>
3. http://highlight.hohli.com
private static string getColor ( HtmlNode node ) <
var attr = node . Attributes [ «style» ] ;
if ( attr == null || attr . Value == null ) <
return null ;
>
string [ ] values = attr . Value . Split ( new [ ] < ';' >) ;
foreach ( string value in values ) <
const string prefixColor = «color:» ;
string trimmed = value . Trim ( ) ;
if ( trimmed . StartsWith ( prefixColor ) ) <
return trimmed . Remove ( 0 , prefixColor . Length ) ;
>
>
4. Стандартная расцветка Visual Studio
private static string getColor( HtmlNode node) <
var attr = node.Attributes[ «style» ];if (attr == null || attr.Value == null ) <
return null ;
>string [ ] values = attr.Value.Split( new [] < ';' >);
foreach ( string value in values) <
const string prefixColor = «color:» ;
string trimmed = value.Trim();if (trimmed.StartsWith(prefixColor)) <
return trimmed.Remove(0, prefixColor.Length);
>
>return null ;
>
5. Стандартная расцветка Reshaper
private static string getColor ( HtmlNode node) var attr = node. Attributes [ «style» ];
if (attr == null || attr. Value == null ) return null ;
>
string [] values = attr. Value . Split ( new [] < ';' >);
foreach ( string value in values) const string prefixColor = «color:» ;
string trimmed = value. Trim ();
if (trimmed. StartsWith ( prefixColor )) return trimmed. Remove (0, prefixColor . Length );
>
>
6. Авторская расцветка
private static string getColor ( HtmlNode node) var attr = node. Attributes [ «style» ];
if (attr == null || attr. Value == null ) return null ;
>
string [] values = attr. Value . Split ( new [] < ';' >);
foreach ( string value in values) const string prefixColor = «color:» ;
string trimmed = value. Trim ();
if (trimmed. StartsWith ( prefixColor )) return trimmed. Remove (0, prefixColor . Length );
>
>
