И снова привет! Сегодня выложил следующую нестабильную версию OutWiker. Как я и обещал, новая версия получила номер 3.0, а точнее — 3.0.0.846. Переход на версию 3.x намечался вместе с переходом на Python 3 и wxPython 4, потому что цифры 2.1 уже не отражали масштаб изменений в программе.

В сегодняшней версии была реализована одна очень полезная возможность, которую я собирался сделать уже давно. До сих пор в викинотации не было команд для раскраски текста, и в качестве обходного маневра приходилось использовать HTML-теги, что было не красиво с точки зрения идеологии. И вот теперь появилась такая штука, которую условно будем называть викистили (не путайте со стилями страницы), с помощью которых можно устанавливать цвет текста, его фон или более сложные эффекты. Сегодняшний пост будет посвящен этой новой возможности.

Формат викистилей

Самое трудное было выбрать форму записи в викинотации. С одной стороны я ориентировался на формат pmWiki, из которого OutWiker позаимствовал большинство викикоманд, но полностью повторять формат из pmWiki я не стал, потому что хотелось дать больше гибкости и удобств, чем это предусмотрено в pmWiki.

Итак, общий формат стилей выглядит следующим образом: %описание стиля%текст…%%. При этом стиль может применяться к участку текста внутри строки или к блоку текста (нескольким абзацам). Приведу пару примеров, чтобы показать работу этой викикоманды в двух режимах.

Применение стиля к участку текста:

Lorem ipsum dolor sit amet, %blue%consectetur adipiscing elit%%. Morbi maximus vel tortor a dictum.

Результат:

Применение стиля к блоку:

%bg-yellow%
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Morbi maximus vel tortor a dictum.
%%

Результат:

Разница между этими примерами состоит в том, что в первом случае текст внутри абзаца будет обернут тегом <span>…</span>, к которому будет применен набор стилей CSS, а во втором случае блок текста будет помещен внутрь тега <div>…</div> со своими стилями.

Чтобы викистили были применены к блоку, нужно, чтобы команды %…% и %% располагались в начале строки и перед ними не должно быть даже пробелов.

Все параметры задаются между двумя первыми знаками процента. Давайте рассмотрим, какие именно параметры там могут располагаться.

Изменение цвета текста

Для изменения цвета текста существует несколько способов. Первый способ — это использование именованных цветов. Например:

Это обычный текст. %red%Это красный текст.%% Текст без оформления. %chocolate%А этот текст будет коричневым.%%

Результат выглядит следующим образом:

В качестве цветов можно использовать имена, стандартные для языка HTML. Список имен цветов вы можете найти на странице справки «Типы страниц — Wiki-страница — Стили оформления — Встроенные стили и цвета» или по ссылке.

Вместо имени цвета можно указать цвет в формате #RRGGBB или #RGB. Например:

Это обычный текст. %#7253b9%Это цветной текст.%% Текст без оформления.

Результат выглядит следующим образом:

Также можно использовать расширенную версию команды %…%, указав явно параметр color:

Это обычный текст. %color=red%Это красный текст.%% Текст без оформления. %color=#7253b9%Это цветной текст.%%

Результат будет таким:

Параметр color позволяет использовать третий формат записи цвета: rgb(…), как это принято в языке CSS. В этом случае значение параметра color нужно обернуть в кавычки. Например:

Это обычный текст. %color=»rgb(200, 90, 128)»%Это цветной текст.%% Текст без оформления.

Результат выглядит следующим образом:

Изменение цвета фона

Формат параметров для изменения цвета фона похож на формат параметров для изменения цвета текста. Если мы хотим использовать именованные цвета, то перед именем цвета нужно добавить приставку bg- или bg_. Например:

Это обычный текст. %bg-yellow%Текст на желтом фоне.%% Текст без оформления. %bg_greenyellow%Текст на светло-зеленом фоне.%%

Результат выглядит следующим образом:

А если мы хотим задать цвет в формате #RRGGBB или rgb(…), то нужно будет воспользоваться параметром bgcolor:

Это обычный текст. %bgcolor=»rgb(200, 90, 128)»%Это цветной текст.%% Текст без оформления. %bgcolor=#95c73c%Это тоже цветной текст.%%

Результат выглядит следующим образом:

Параметры для задания цвета и фона можно объединить в одну:

Это обычный текст. %bg-yellow blue%Голубой цвет на желтом фоне.%% Текст без оформления. %bgcolor=»#000000″ color=»lightgray»%Серый текст на черном фоне.%%

Результат выглядит следующим образом:

Дополнительные стили CSS

Команда %…% не ограничена только изменением цвета текста и фона. Если вы знаете язык CSS, то можете применить к тексту произвольное оформление с помощью параметра style. Например, добавим блоку текста рамку, а содержимое его сделаем курсивом:

%style=»font-weight: bold; border: solid 1px;»%
Блок текста с оформлением.
Бла-бла-бла.
И еще немного текста.
%%

Результат выглядит следующим образом:

Параметр style можно использовать совместно с заданием цвета и фона:

%blue bg-yellow style=»font-weight: bold; border: solid 1px;»%
Блок текста с оформлением.
Бла-бла-бла.
И еще немного текста.
%%

Результат:

Пользовательские стили

А теперь мы подошли к самому интересному. Помимо имени цвета в команде %…% можно указать имя одного из предустановленных или пользовательских стилей, которые могут добавлять интересные эффекты. В текущей версии OutWiker прилагаются следующие версии строковых стилей: notice, error, warn, success, а для блоков созданы еще два дополнительных стиля: border и frame.

Несколько примеров использования стилей:

Обычный текст. %notice%Текст со стилем notice.%% … %error%Текст со стилем error.%% … %warn%Текст со стилем warn.%% … %success%Текст со стилем success.%%

В результате мы получим следующее оформление:

И примеры стилей, которые можно применять для блоков.

%border%
Пример блока текста
с применением стиля border.
%%

%frame%
Пример блока текста
с применением стиля frame.
%%

Результат выглядит следующим образом:

Вы можете создавать свои именованные стили. Чтобы было понятно, как это делать, рассмотрим способ их хранения.

Именованные стили хранятся в папках textstyles. Одна такая папка расположена рядом с запускаемым файлом outwiker.exe, а другая — в профиле пользователя, там же, где и все остальные настройки OutWiker. Внутри папки textstyles есть две вложенные папки — block и inline. В папке block хранятся файлы .css со стилями, которые можно применять для блока текста, а внутри папки inline лежат аналогичные файлы .css для строчных стилей. Имя файла должно совпадать с именем стиля. Например, стиль frame содержится в файле textstyles/block/frame.css. Его содержимое выглядит следующим образом:

div.frame {
background-color: #ddd;
padding: 1em;
margin: 1em;
border: 1px solid #000;
}

Когда вы применяете именованный стиль к тексту на странице, то содержимое файла стиля вставляется в заголовочную часть создаваемого HTML-файла. Файл .css может содержать несколько определений для оформления, например, для основного блока и для его дочерних элементов, тут уже вы ограничены своей фантазией и знанием CSS. Главное, чтобы в файле .css для блоков было определение для тега div, а для строчных стилей — для тега span. Имя класса CSS должно совпадать с именем стиля и именем файла .css. Имя класса не должно совпадать с именем какого-либо стандартного цвета, а также имя класса не должно быть «thumb», т.к. команда %thumb…% используется для создания миниатюр.

Для упрощения работы со стилями в OutWiker были добавлены несколько пунктом меню и кнопок. Пункты меню расположены в меню «Вики — Шрифт» и называются они «Цвет текста…», «Цвет фона текста…», «Стиль текста…» и «Расширенный стиль…». Первые два пункта меню (и кнопки на панели инструментов, которые им соответствуют) вызывают стандартный диалог выбора цвета, и при выборе цвета вставляют соответствующую команду для раскраски либо текста, либо фона. Аналогично работает пункт меню и кнопка «Стиль текста…», при нажатии на него будет показан диалог со списком имеющихся стилей.

Если же вы хотите применить сразу несколько видов оформления, то выбирайте пункт меню «Вики — Шрифт — Расширенный стиль…» (кнопки для него не предусмотрено), и в этом случае откроется диалог для настроек внешнего вида текста с предпросмотром оформления:

В результате будет вставлена команда наподобие такой:

%success blue style=»font-style: italic;»%…%%

Надеюсь мне удалось вас заинтересовать новыми возможностями в OutWiker, но работа над викистилями еще будет продолжаться, есть еще некоторые идеи для небольших улучшений, в том числе в интерфейсе диалогов. В будущем хотелось бы в стандартный набор стилей добавить побольше разнообразных стилей.

На этом пока все. Будем работать над программой дальше.

OutWiker в социальных сетях:

• OutWiker ВКонтакте
• Канал в Telegram
• OutWiker в Twitter

PS. Вы можете подписаться на новости сайта через RSS, Группу Вконтакте или Канал в Telegram.