Примеры стилизации

Пожалуйста, экспериментируйте в песочнице!

Для большей выразительности текст в PmWiki можно расцвечивать и видоизменять с помощью ВикиСтилей.

Стиль записываемый между парой знаков процента меняет последующий текст. Пример:

Этот текст %color=red% красный, %color=blue% синий, %% и обычный (чёрный).

Этот текст красный, синий, и обычный (чёрный).

Большинство доступных стилей первоначально перенесено из HTML и CSS. В дополнение, для краткости записи автору можно определять свои собственные стили пользуясь свойством define=. Назовём их сокращения. Например, для определения стиля %red% надо сделать следующее:

%color=red define=mystyle%
В этом предложении %mystyle% красный текст оформлен с помощью новоиспечённого сокращения.

В этом предложении красный текст оформлен с помощью новоиспечённого сокращения.

Такие сокращения могут совмещаться с другими стилями, включая и сокращения тоже:

%color=red define=lovelyred%
%bgcolor=yellow define=likegrapefruit%

%red% Этот текст красный, %red bgcolor=#ccc% красный на сером фоне и %lovelyred likegrapefruit% красный на жёлтом фоне.

Этот текст красный, красный на сером фоне и красный на жёлтом фоне.

Но это всё то же, что и было возможно в PmWiki 1.o. А вот PmWiki 2.o способна пользуясь свойством apply= стилизовать целый блок. Применяя apply=block в ВикиСтиле вы указываете что стиль воздейстует на блок в целом, нежели просто на последующий текст:

Это весь блок %apply=block bgcolor=yellow% с жёлтым фоном, даже если ВикиСтиль встретился посреди строки. %bgcolor=pink% Другой строковый (неблочный) ВикиСтиль действует на часть строки %% по прежнему.

Это весь блок с жёлтым фоном, даже если ВикиСтиль встретился посреди строки. Другой строковый (неблочный) ВикиСтиль действует на часть строки по прежнему.

Это значит, что теперь можно делать выравнивание вправо и по центру.

%block text-align=right% Этот параграф выравнен по правому краю. 

%block text-align=center% А этот расположен выравнивается по центру.

Этот параграф выравнен по правому краю.

А этот расположен выравнивается по центру.

В действительности для этого уже предопределены сокращения %right% и %center%, так что всё можно было бы сделать проще:

%right% Выравнено вправо.

%center% Отцентрировано.

Выравнено вправо.

Отцентрировано.

Авторам позволено определять свои собственные стили:

%block bgcolor=#fdf define=Pm%
%center bgcolor=#dfd border='3px dotted green' define=goofy%
%right bgcolor=#ffffcc border='1px dotted red' padding=5px define=rediguana%
%define=strike text-decoration=line-through%

%Pm% Текст на светло-сиреневом фоне - это коментарий "Pm".

%goofy% Здесь пачкотня от Гуффи.

%rediguana% Тыр-пыр-быр редигваны!

%goofy%Привет, я %strike%огорчён%% %strike%раздавлен%% счастлив с вами встретиться.

Текст на светло-сиреневом фоне - это коментарий "Pm".

Здесь пачкотня от Гуффи.

Тыр-пыр-быр редигваны!

Привет, я огорчён раздавлен счастлив с вами встретиться.

Стили можно применять к большинству видов блоков:

* %block bgcolor=yellow% Здесь строка списка
* А здесь другая строка списка

* Вот ещё список

# Новый список
  • Здесь строка списка
  • А здесь другая строка списка
  • Вот ещё список
  1. Новый список

В частности, это означает что пронумерованые списки теперь можно стилизовать пользуясь предопределёнными стилями для блоков -- %ROMAN%, %roman%, %ALPHA% и %alpha%. Одно из этих сокращений помещается в первой строке списка (вы можете доработать набор стилей пронумерованых списков):

# %ROMAN% Корневой уровень
## %ALPHA% второй-уровень
## второй-уровень
## второй-уровень
### третий-уровень
### третий-уровень
## второй-уровень
### третий-уровень
#### %alpha% четвёртый-уровень
##### %roman% пятый-уровень
##### пятый-уровень
#### четвёртый-уровень
# Корневой уровень
# Корневой уровень
  1. Корневой уровень
    1. второй-уровень
    2. второй-уровень
    3. второй-уровень
      1. третий-уровень
      2. третий-уровень
    4. второй-уровень
      1. третий-уровень
        1. четвёртый-уровень
          1. пятый-уровень
          2. пятый-уровень
        2. четвёртый-уровень
  2. Корневой уровень
  3. Корневой уровень

ВикиСтили можно совмещать с CSS (каскадными списками стилей) что бы сделать подобную нумерацию автоматически -- смотри Cookbook:OutlineLists.

Вопросы и Ответы

Как мне сделать блок преформатированого текста с окрашеным фоном и рамкой?

Сделайте что-то вроде этого:

%block bgcolor=#f0f9ff border='1px solid gray' padding=5px%[@
ip access-list extended example-acl
remark ** это пример acl **
deny ip any host 10.0.0.1
permit ip any any
@]
ip access-list extended example-acl
remark ** это пример acl **
deny ip any host 10.0.0.1
permit ip any any

<< ВикиСтили | Документация | Директивы страницы >>

Перевод страницы PmWiki.WikiStyleExamples - Оригинал перевода PmWikiRu.WikiStyleExamples - Backlinks
PmWikiRu.WikiStyleExamples: редакция от September 10, 2011, at 08:48 PM
PmWiki.WikiStyleExamples: редакция от October 18, 2021, at 05:27 PM