]> git.vanrenterghem.biz Git - git.ikiwiki.info.git/blob - doc/todo/color_plugin.mdwn
eh
[git.ikiwiki.info.git] / 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>`.
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/).
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.
16 What do you think about it? --[[Paweł|ptecza]]
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 >       """]]
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? ;)
34 >>> I was thinking one would be foreground, the other background. Don't
35 >>> know if setting the background makes sense or not.
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]]
41 >> Yes, it's a good intro plugin, have at it! --[[Joey]]
43 ---
45 This is a RC1 of my `color` plugin. It works for me well, but all your
46 comments are very welcome. --[[Paweł|ptecza]]
48         --- /dev/null   2008-07-24 09:38:19.000000000 +0200
49         +++ color.pm    2008-07-25 14:43:15.000000000 +0200
50         @@ -0,0 +1,75 @@
51         +#!/usr/bin/perl
52         +# Ikiwiki text colouring plugin
53         +# Paweł Tęcza <ptecza@net.icm.edu.pl>
54         +package IkiWiki::Plugin::color;
55         +
56         +use warnings;
57         +use strict;
58         +use IkiWiki 2.00;
59         +
60         +sub import { #{{{
61         +       hook(type => "preprocess", id => "color", call => \&preprocess);
62         +       hook(type => "sanitize",   id => "color", call => \&sanitize);
63         +} #}}}
64         +
65         +sub preserve_style(@) { #{{{
66         +       my ($colors, $text) = @_;
67         +       $colors = '' unless $colors;    # foreground and background colors
68         +       $text   = '' unless $text;      # text
69         +       
70         +       # Check colors
71         +       my ($color1, $color2) = ();
72         +       $colors = lc($colors);  # Regexps on lower case strings are simpler
73         +       if ($colors =~ /,/) {
74         +               # Probably defined both foreground and background color
75         +               ($color1, $color2) = ($colors =~ /(.*),(.*)/);
76         +       }
77         +       else {
78         +               # Probably defined only foreground color
79         +               ($color1, $color2) = ($colors, '');
80         +       }
81         +       
82         +       # Validate colors. Only color name or color code are valid.
83         +       my ($fg, $bg) = ();
84         +       $fg = $color1 if ($color1 &&
85         +                        ($color1 =~ /^[a-z]+$/ || $color1 =~ /^#[0-9a-f]{3,6}$/));
86         +       $bg = $color2 if ($color2 &&
87         +                        ($color2 =~ /^[a-z]+$/ || $color2 =~ /^#[0-9a-f]{3,6}$/));
88         +
89         +       my $preserved = '';
90         +       if ($fg || $bg) {
91         +               $preserved .= 'COLORS {';
92         +               $preserved .= 'color: '.$fg if ($fg);
93         +               $preserved .= '; ' if ($fg && $bg);
94         +               $preserved .= 'background-color: '.$bg if ($bg);
95         +               $preserved .= '} SROLOC;TEXT {'.$text.'} TXET';
96         +       }
97         +       
98         +       return $preserved;
99         +
100         +} #}}}
101         +
102         +sub replace_preserved_style(@) { #{{{
103         +       my $content = shift;
104         +
105         +       if ($content) {
106         +               $content =~ s/COLORS {/<span style="/;
107         +               $content =~ s/} SROLOC;TEXT {/">/;
108         +               $content =~ s/} TXET/<\/span>/;
109         +       }
110         +
111         +       return $content; 
112         +} #}}}
113         +
114         +sub preprocess (@) { #{{{
115         +       return preserve_style($_[0], $_[2]);
116         +} #}}}
117         +
118         +sub sanitize (@) { #{{{
119         +       my %params = @_;
120         +       
121         +       return replace_preserved_style($params{content})
122         +               if (exists $params{content})
123         +} #}}}
124         +
125         +1
126         --- /dev/null   2008-07-24 09:38:19.000000000 +0200
127         +++ color.mdwn  2008-07-25 14:50:19.000000000 +0200
128         @@ -0,0 +1,31 @@
129         +\[[!template id=plugin name=color core=0 author="[[Paweł Tęcza|ptecza]]"]]
130         +
131         +This plugin can be used to color a piece of text on Ikiwiki page.
132         +It's possible setting foreground and/or background color of the text.
133         +
134         +The plugin syntax is very simple. You only need to type name (e.g. `white`)
135         +or HTML code of colors (e.g. `#ffffff`) and a text you want to color.
136         +The colors should by separated using a comma character.
137         +
138         +Below are a few examples:
139         +
140         +    \[[!color white,#ff0000 "White text on red background"]]
141         +
142         +Foreground color is defined as a word, background color is defined as HTML
143         +color code.
144         +
145         +    \[[!color white "White text on default color background"]]
146         +
147         +Foreground color is default color if only one color was typed and a comma
148         +character is missing.
149         +
150         +    \[[!color white, "White text on default color background"]]
151         +
152         +Background color is missing, so the text is displayed on default background.
153         +
154         +    \[[!color ,#ff0000 "Default color text on red background"]]
155         +
156         +Foreground is missing, so the text has default color.
157         +
158         +This plugin is not enabled by default. You can do that in [[ikiwiki.setup]]
159         +file (hint: `add_plugins` variable).