15.09.2009

Подсветка синтаксиса в блоге. Используем онлайновые маркеры синтаксиса

О том, как вставить в блог фрагмент кода с подсвеченным синтаксисом, используя редактор Vim, я уже писал. А недавно мне подсказали еще более простое решение, не требующее для своей реализации ни чего кроме браузера - в сети имеются специальные (абсолютно бесплатные) сервисы, позволяющие разукрашивать, перед публикацией, практически любой код. Принцип работы с клиентом у таких сервисов-маркеров общий: пользователь вводит в форму фрагмент кода, выбирает из выпадающего списка тип оформляемого кода, включает (если нужно) пару дополнительных опций и, нажав соответствующую кнопку, отправляет запрос сервису. Сервис возвращает подсвеченный код в виде блока тегов html, который можно скопировать и вставить в свою страницу. Список поддерживаемых языков кода у сервисов весьма обширный, разукрасить можно практически все что угодно.

Вот два таких онлайновых маркера.

Online syntax highlighting

Online syntax highlighting, способен автоматически угадывать тип введенного кода, позволяет выбрать несколько стилей оформления. Вставляем код в редактор Source code, выбираем язык программирования в списке Type, стиль оформления в списке Style, жмем кнопку Highlight, в появившемся редакторе выделяем и копируем блок html тегов.

Примеры подсвеченного кода при различных стилях оформления:

Стиль: white

# -*- coding: UTF-8 -*-

import matplotlib.pyplot as plt

# Значения по оси X
X = [20.0, 40.0, 60.0, 80.0, 100.0]
# Набор значений по оси Y
Y_10 = [0.97252, 0.94238, 0.89927, 0.85197, 0.79784]
Y_20 = [0.96864, 0.93518, 0.89113, 0.84344, 0.78934]
Y_30 = [0.96395, 0.92770, 0.88278, 0.83473, 0.78075]

# Строим диаграмму
plt.plot(X, Y_10, 'bD:',  label = u'Температура 10 \u00b0C')
plt.plot(X, Y_20, 'r^:',  label = u'Температура 20 \u00b0C')
plt.plot(X, Y_30, 'go:',  label = u'Температура 30 \u00b0C')
# Задаем подписи
plt.title(u'Зависимость плотности водных растворов этилового спирта от температуры')
plt.xlabel(u'Массовая доля этилового спирта, %')
plt.ylabel(u'Плотность, г/мл')
# Включаем легенду
plt.legend(loc = 'best')
# Сохраняем построенную диаграмму в файл
plt.savefig('spirit.png', format = 'png')

Стиль: navy

# -*- coding: UTF-8 -*-

import matplotlib.pyplot as plt

# Значения по оси X
X = [20.0, 40.0, 60.0, 80.0, 100.0]
# Набор значений по оси Y
Y_10 = [0.97252, 0.94238, 0.89927, 0.85197, 0.79784]
Y_20 = [0.96864, 0.93518, 0.89113, 0.84344, 0.78934]
Y_30 = [0.96395, 0.92770, 0.88278, 0.83473, 0.78075]

# Строим диаграмму
plt.plot(X, Y_10, 'bD:',  label = u'Температура 10 \u00b0C')
plt.plot(X, Y_20, 'r^:',  label = u'Температура 20 \u00b0C')
plt.plot(X, Y_30, 'go:',  label = u'Температура 30 \u00b0C')
# Задаем подписи
plt.title(u'Зависимость плотности водных растворов этилового спирта от температуры')
plt.xlabel(u'Массовая доля этилового спирта, %')
plt.ylabel(u'Плотность, г/мл')
# Включаем легенду
plt.legend(loc = 'best')
# Сохраняем построенную диаграмму в файл
plt.savefig('spirit.png', format = 'png')

Стиль: Bred3

# -*- coding: UTF-8 -*-

import matplotlib.pyplot as plt

# Значения по оси X
X = [20.0, 40.0, 60.0, 80.0, 100.0]
# Набор значений по оси Y
Y_10 = [0.97252, 0.94238, 0.89927, 0.85197, 0.79784]
Y_20 = [0.96864, 0.93518, 0.89113, 0.84344, 0.78934]
Y_30 = [0.96395, 0.92770, 0.88278, 0.83473, 0.78075]

# Строим диаграмму
plt.plot(X, Y_10, 'bD:',  label = u'Температура 10 \u00b0C')
plt.plot(X, Y_20, 'r^:',  label = u'Температура 20 \u00b0C')
plt.plot(X, Y_30, 'go:',  label = u'Температура 30 \u00b0C')
# Задаем подписи
plt.title(u'Зависимость плотности водных растворов этилового спирта от температуры')
plt.xlabel(u'Массовая доля этилового спирта, %')
plt.ylabel(u'Плотность, г/мл')
# Включаем легенду
plt.legend(loc = 'best')
# Сохраняем построенную диаграмму в файл
plt.savefig('spirit.png', format = 'png')

Стиль: black

# -*- coding: UTF-8 -*-

import matplotlib.pyplot as plt

# Значения по оси X
X = [20.0, 40.0, 60.0, 80.0, 100.0]
# Набор значений по оси Y
Y_10 = [0.97252, 0.94238, 0.89927, 0.85197, 0.79784]
Y_20 = [0.96864, 0.93518, 0.89113, 0.84344, 0.78934]
Y_30 = [0.96395, 0.92770, 0.88278, 0.83473, 0.78075]

# Строим диаграмму
plt.plot(X, Y_10, 'bD:',  label = u'Температура 10 \u00b0C')
plt.plot(X, Y_20, 'r^:',  label = u'Температура 20 \u00b0C')
plt.plot(X, Y_30, 'go:',  label = u'Температура 30 \u00b0C')
# Задаем подписи
plt.title(u'Зависимость плотности водных растворов этилового спирта от температуры')
plt.xlabel(u'Массовая доля этилового спирта, %')
plt.ylabel(u'Плотность, г/мл')
# Включаем легенду
plt.legend(loc = 'best')
# Сохраняем построенную диаграмму в файл
plt.savefig('spirit.png', format = 'png')

Во всех примерах использован код из поста Пакет matplotlib. Строим банальный график

Syntax Highlighter

В целом порядок работы с сервисом Syntax Highlighter аналогичен описанному выше. Имеются опции: Line numbers - включить/выключить автоматическую нумерацию строк кода, Use <font> tag (for Habrahabr) - если включена, код оформляется посредством тега <font>, в противном случае с помощью классов css (внешний вид подсвеченного кода при этом несколько отличается).

Примеры:

При включенной опции Use <font> tag (for Habrahabr):

  1. # -*- coding: UTF-8 -*-
  2.  
  3. import matplotlib.pyplot as plt
  4.  
  5. # Значения по оси X
  6. = [20.040.060.080.0100.0]
  7. # Набор значений по оси Y
  8. Y_10 = [0.972520.942380.899270.851970.79784]
  9. Y_20 = [0.968640.935180.891130.843440.78934]
  10. Y_30 = [0.963950.927700.882780.834730.78075]
  11.  
  12. # Строим диаграмму
  13. plt.plot(X, Y_10, 'bD:',  label = u'Температура 10 \u00b0C')
  14. plt.plot(X, Y_20, 'r^:',  label = u'Температура 20 \u00b0C')
  15. plt.plot(X, Y_30, 'go:',  label = u'Температура 30 \u00b0C')
  16. # Задаем подписи
  17. plt.title(u'Зависимость плотности водных растворов этилового спирта от температуры')
  18. plt.xlabel(u'Массовая доля этилового спирта, %')
  19. plt.ylabel(u'Плотность, г/мл')
  20. # Включаем легенду
  21. plt.legend(loc = 'best')
  22. # Сохраняем построенную диаграмму в файл
  23. plt.savefig('spirit.png', format = 'png')

При выключенной опции Use <font> tag (for Habrahabr):

  1. # -*- coding: UTF-8 -*-
  2.  
  3. import matplotlib.pyplot as plt
  4.  
  5. # Значения по оси X
  6. X = [20.0, 40.0, 60.0, 80.0, 100.0]
  7. # Набор значений по оси Y
  8. Y_10 = [0.97252, 0.94238, 0.89927, 0.85197, 0.79784]
  9. Y_20 = [0.96864, 0.93518, 0.89113, 0.84344, 0.78934]
  10. Y_30 = [0.96395, 0.92770, 0.88278, 0.83473, 0.78075]
  11.  
  12. # Строим диаграмму
  13. plt.plot(X, Y_10, 'bD:', label = u'Температура 10 \u00b0C')
  14. plt.plot(X, Y_20, 'r^:', label = u'Температура 20 \u00b0C')
  15. plt.plot(X, Y_30, 'go:', label = u'Температура 30 \u00b0C')
  16. # Задаем подписи
  17. plt.title(u'Зависимость плотности водных растворов этилового спирта от температуры')
  18. plt.xlabel(u'Массовая доля этилового спирта, %')
  19. plt.ylabel(u'Плотность, г/мл')
  20. # Включаем легенду
  21. plt.legend(loc = 'best')
  22. # Сохраняем построенную диаграмму в файл
  23. plt.savefig('spirit.png', format = 'png')

Ну вот на этом и все. Спасибо за внимание.

Предыдущий пост по теме: Как вставить в блог фрагмент кода с подсветкой синтаксиса

Комментариев нет:

Отправить комментарий