Merge branch 'tova' into autoconfig
[ikiwiki] / doc / todo / color_plugin.mdwn
1 Recently I've wanted to colour some piece of text on my Ikiwiki page.
2 It seems that Markdown can do it only using HTML tags, so I used
3 `<span class="color">foo bar baz</span>`.
4
5 However, in my opinion mixing Markdown syntax and HTML tags is rather ugly,
6 so maybe we should create a new color plugin to add more color to Ikiwiki ;)
7 I know that another Wikis have similar plugin, for example
8 [WikiDot](http://www.wikidot.com/).
9
10 I've noticed that htmlscrubber plugin strips `style` attribute, because of
11 security, so probably we need to use `class` attribute of HTML. But then
12 we have to customize our `local.css` file to add all color we want to use.
13 It's not as easy in usage like color name or definition as plugin argument,
14 but I don't have a better idea right now.
15
16 What do you think about it? --[[Paweł|ptecza]]
17
18 > Making a plugin preserve style attributes can be done, it just has to add
19 > them after the sanitize step, which strips them. The general method is
20 > adding placeholders first, and replacing them with the real html later.
21
22 > The hard thing to me seems to be finding a syntax that is better than a
23 > `<span>`. A preprocessor directive is not really any less ugly than html
24 > tags, though at least it could play nicely with nested markdown: --[[Joey]]
25
26 >       \[[!color red,green """
27 >       Xmas-colored markdown here
28 >       """]]
29
30 >> I'm glad you like that idea. In my opinion your syntax looks good.
31 >> Out of curiosity, why did you used 2 colors in your example? What is HTML
32 >> result for it? ;)
33
34 >>> I was thinking one would be foreground, the other background. Don't
35 >>> know if setting the background makes sense or not.
36
37 >> I can try to create that plugin, if you are too busy now. I'm not Perl
38 >> hacker, but I wrote a lot of Perl scripts in my life and color plugin
39 >> doesn't seem to be very hard task. --[[Paweł|ptecza]]
40
41 >> Yes, it's a good intro plugin, have at it! --[[Joey]]
42
43 ---
44
45 This is a RC1 of my `color` plugin. It works for me well, but all your
46 comments are very welcome. --[[Paweł|ptecza]]
47
48 > Sure, I have a couple.
49
50 >> Great! Thank you very much! --[[Paweł|ptecza]]
51
52 > The preprocess function is passed named parameters. The hack you have of
53 > hardcoding use of `$_[0]` and `$_[2]` can fail at any time.
54
55 >> But the problem is that arguments of my plugin don't have a name.
56 >> How can I identify them in `params` hash?
57
58 >> Similar hardcoded method I've found in `img` plugin :) But only one
59 >> argument is not named there (image path).
60
61 >> Maybe I shouldn't use so simple plugin syntax? For following syntax
62 >> I wouldn't have that problem:
63
64 >>     \[[!color fg=white bg=red text="White text on red background"]]
65
66 > `replace_preserved_style` is passed a single parameter, so its prototype
67 > should be `($)`, not `(@)`.  Ditt `preserve_style`, it should have
68 > `($$)`.
69
70 >> OK, it will be fixed.
71
72 > The sanitize hook is always passed `$params{content}`, so there should be
73 > no reason to check that it exists. Also, it shouldn't be done in a
74 > sanitize hook, since html sanitization could run _after_ that santize
75 > hook. It should use a format hook.
76
77 >> Probably you're right. It was rather paranoid checking ;) Thanks for
78 >> the hook hint!
79
80 > The preprocess hook needs to call `IkiWiki::preprocess` on the content
81 > passed into it if you want to support nesting other preprocessor
82 > directives inside the color directive. See `preprocess_toggleable` in the
83 > toggle plugin, for example.
84
85 > I'm not a big fan of the dummy text `COLORS { ... } SROLOC;TEXT { ... TXET }`
86 > The method used by toggle of using two real `<div>`s seems slightly
87 > better. --[[Joey]]
88
89 >> I don't like that too, but I didn't have better idea :) Thank you for
90 >> the hint! I'll take a look at `toggle` plugin.
91
92 ---
93
94 And here is RC2 of that plugin. I've changed a plugin syntax, because the old
95 seems to be too enigmatic and it was hard to me to handle unnamed parameters
96 in not hardcoded way. I hope that my changes are acceptable for you.
97 Of course, I'm open for discussion or exchange of ideas :) --[[Paweł|ptecza]]
98
99         --- /dev/null   2008-06-21 02:02:15.000000000 +0200
100         +++ color.pm    2008-07-27 14:58:12.000000000 +0200
101         @@ -0,0 +1,69 @@
102         +#!/usr/bin/perl
103         +# Ikiwiki text colouring plugin
104         +# Paweł‚ Tęcza <ptecza@net.icm.edu.pl>
105         +package IkiWiki::Plugin::color;
106         +
107         +use warnings;
108         +use strict;
109         +use IkiWiki 2.00;
110         +
111         +sub import { #{{{
112         +       hook(type => "preprocess", id => "color", call => \&preprocess);
113         +       hook(type => "format",     id => "color", call => \&format);
114         +} #}}}
115         +
116         +sub preserve_style($$$) { #{{{
117         +       my $foreground = shift;
118         +       my $background = shift;
119         +       my $text       = shift;
120         +
121         +       $foreground = defined $foreground ? lc($foreground) : '';
122         +       $background = defined $background ? lc($background) : '';
123         +       $text       = '' unless (defined $text);
124         +
125         +       # Validate colors. Only color name or color code are valid.
126         +       $foreground = '' unless ($foreground &&
127         +                               ($foreground =~ /^[a-z]+$/ || $foreground =~ /^#[0-9a-f]{3,6}$/));
128         +       $background = '' unless ($background &&
129         +                               ($background =~ /^[a-z]+$/ || $background =~ /^#[0-9a-f]{3,6}$/));
130         +
131         +       my $preserved = '';
132         +       $preserved .= '<span class="color">';
133         +       $preserved .= 'color: '.$foreground if ($foreground);
134         +       $preserved .= '; ' if ($foreground && $background);
135         +       $preserved .= 'background-color: '.$background if ($background);
136         +       $preserved .= '</span>';
137         +       $preserved .= '<span class="colorend">'.$text.'</span>';
138         +       
139         +       return $preserved;
140         +
141         +} #}}}
142         +
143         +sub replace_preserved_style($) { #{{{
144         +       my $content = shift;
145         +
146         +       $content =~ s!<span class="color">((color: ([a-z]+|\#[0-9a-f]{3,6})?)?((; )?(background-color: ([a-z]+|\#[0-9a-f]{3,6})?)?)?)</span>!<span class="color" style="$1">!g;
147         +       $content =~ s!<span class="colorend">!!g;
148         +
149         +       return $content; 
150         +} #}}}
151         +
152         +sub preprocess(@) { #{{{
153         +       my %params = @_;
154         +
155         +       # Preprocess the text to expand any preprocessor directives
156         +       # embedded inside it.
157         +       $params{text} = IkiWiki::preprocess($params{page}, $params{destpage},
158         +                               IkiWiki::filter($params{page}, $params{destpage}, $params{text}));
159         +
160         +       return preserve_style($params{foreground}, $params{background}, $params{text});
161         +} #}}}
162         +
163         +sub format(@) { #{{{
164         +       my %params = @_;
165         +
166         +       $params{content} = replace_preserved_style($params{content});
167         +       return $params{content};        
168         +} #}}}
169         +
170         +1
171         --- /dev/null   2008-06-21 02:02:15.000000000 +0200
172         +++ color.mdwn  2008-07-27 15:04:42.000000000 +0200
173         @@ -0,0 +1,25 @@
174         +\[[!template id=plugin name=color core=0 author="[[ptecza]]"]]
175         +
176         +This plugin can be used to color a piece of text on Ikiwiki page.
177         +It's possible setting foreground and/or background color of the text.
178         +
179         +You can use name (e.g. `white`) or HTML code of colors (e.g. `#ffffff`)
180         +to define colors. 
181         +
182         +Below are a few examples:
183         +
184         +    \[[!color foreground=white background=#ff0000 text="White text on red background"]]
185         +
186         +Foreground color is defined as a word, background color is defined as HTML
187         +color code.
188         +
189         +    \[[!color foreground=white text="White text on default color background"]]
190         +
191         +Background color is missing, so the text is displayed on default background.
192         +
193         +    \[[!color background=#ff0000 text="Default color text on red background"]]
194         +
195         +Foreground is missing, so the text has default color.
196         --- style.css-orig      2008-07-27 15:12:39.000000000 +0200
197         +++ style.css   2008-07-27 15:15:06.000000000 +0200
198         @@ -333,3 +333,7 @@
199                 background: #eee; 
200                 color: black !important;
201          }
202         +
203         +span.color {
204         +       padding: 2px;
205         +}