Т.к., существует необходимость публикации исходных кодов и файлов конфигураций,
то сразу озадачимся вопросом подсветки и оформления. После анализа возможных вариантов
выбор пал на SyntaxHighlighter
Подключение
1. Сохраняем шаблон блога в файл, используя механизм backup/restore
2. Открываем файл и вставляем в тэг <head> несколько строк, а именно подключение таблицы стилей, темы и скриптов поддержки нужных нам языков
Список доступных цветовых тем можно посмотреть здесь, список поддерживаемых синтаксисов здесь. В примере используется тема по умолчанию, и список синтаксисов ограничен необходимым для моих целей.
3. Загружаем файл обратно
Использование
Метод <script />
Данный метод позволяет не подготавливать исходный код, переводя его в html последовательность
К одному из недостатков данного метода можно отнести то, что отформатированный исходный код появляется не сразу. А так же то, что исходный код не виден в WYSIWYG режиме редактирования поста.
Метод <pre />
Данный метод требует перевода исходного кода в html последовательность. Сервисов позволяющих реализовать данный перевод предостаточно, например можно воспользоваться HTMLEscape.net.
Полезные параметры
Все доступные параметры и примеры их использования можно найти на сайте производителя.
gutter - Нумерация строк (по умолчанию включена)
highlight - Подсветка строк
Подключение
1. Сохраняем шаблон блога в файл, используя механизм backup/restore
2. Открываем файл и вставляем в тэг <head> несколько строк, а именно подключение таблицы стилей, темы и скриптов поддержки нужных нам языков
...
<head>
<!-- Core -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<!-- Thema -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<!-- Syntax -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<!-- Starting -->
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
...
</head>
...
Список доступных цветовых тем можно посмотреть здесь, список поддерживаемых синтаксисов здесь. В примере используется тема по умолчанию, и список синтаксисов ограничен необходимым для моих целей.
3. Загружаем файл обратно
Использование
Метод <script />
Данный метод позволяет не подготавливать исходный код, переводя его в html последовательность
К одному из недостатков данного метода можно отнести то, что отформатированный исходный код появляется не сразу. А так же то, что исходный код не виден в WYSIWYG режиме редактирования поста.
Метод <pre />
Данный метод требует перевода исходного кода в html последовательность. Сервисов позволяющих реализовать данный перевод предостаточно, например можно воспользоваться HTMLEscape.net.
public static T[] SubArray<T>(this T[] sourceArray, int index, int length)
{
var result = new T[length];
Array.Copy(sourceArray, index, result, 0, length);
return result;
}
Полезные параметры
Все доступные параметры и примеры их использования можно найти на сайте производителя.
gutter - Нумерация строк (по умолчанию включена)
highlight - Подсветка строк
Комментариев нет :
Отправить комментарий