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 > The preprocess function is passed named parameters. The hack you have of
  51 > hardcoding use of `$_[0]` and `$_[2]` can fail at any time.
  52 >
  53 > `replace_preserved_style` is passed a single parameter, so its prototype
  54 > should be `($)`, not `(@)`.  Ditt `preserve_style`, it should have
  55 > `($$)`.
  56 >
  57 > The sanitize hook is always passed `$params{content}`, so there should be
  58 > no reason to check that it exists. Also, it shouldn't be done in a
  59 > sanitize hook, since html sanitization could run _after_ that santize
  60 > hook. It should use a format hook.
  61 >
  62 > The preprocess hook needs to call `IkiWiki::preprocess` on the content
  63 > passed into it if you want to support nesting other preprocessor
  64 > directives inside the color directive. See `preprocess_toggleable` in the
  65 > toggle plugin, for example.
  66 >
  67 > I'm not a big fan of the dummy text `COLORS { ... } SROLOC;TEXT { ... TXET }`
  68 > The method used by toggle of using two real `<div>`s seems slightly
  69 > better. --[[Joey]]
  70
  71         --- /dev/null   2008-07-24 09:38:19.000000000 +0200
  72         +++ color.pm    2008-07-25 14:43:15.000000000 +0200
  73         @@ -0,0 +1,75 @@
  74         +#!/usr/bin/perl
  75         +# Ikiwiki text colouring plugin
  76         +# Paweł Tęcza <ptecza@net.icm.edu.pl>
  77         +package IkiWiki::Plugin::color;
  78         +
  79         +use warnings;
  80         +use strict;
  81         +use IkiWiki 2.00;
  82         +
  83         +sub import { #{{{
  84         +       hook(type => "preprocess", id => "color", call => \&preprocess);
  85         +       hook(type => "sanitize",   id => "color", call => \&sanitize);
  86         +} #}}}
  87         +
  88         +sub preserve_style(@) { #{{{
  89         +       my ($colors, $text) = @_;
  90         +       $colors = '' unless $colors;    # foreground and background colors
  91         +       $text   = '' unless $text;      # text
  92         +
  93         +       # Check colors
  94         +       my ($color1, $color2) = ();
  95         +       $colors = lc($colors);  # Regexps on lower case strings are simpler
  96         +       if ($colors =~ /,/) {
  97         +               # Probably defined both foreground and background color
  98         +               ($color1, $color2) = ($colors =~ /(.*),(.*)/);
  99         +       }
 100         +       else {
 101         +               # Probably defined only foreground color
 102         +               ($color1, $color2) = ($colors, '');
 103         +       }
 104         +
 105         +       # Validate colors. Only color name or color code are valid.
 106         +       my ($fg, $bg) = ();
 107         +       $fg = $color1 if ($color1 &&
 108         +                        ($color1 =~ /^[a-z]+$/ || $color1 =~ /^#[0-9a-f]{3,6}$/));
 109         +       $bg = $color2 if ($color2 &&
 110         +                        ($color2 =~ /^[a-z]+$/ || $color2 =~ /^#[0-9a-f]{3,6}$/));
 111         +
 112         +       my $preserved = '';
 113         +       if ($fg || $bg) {
 114         +               $preserved .= 'COLORS {';
 115         +               $preserved .= 'color: '.$fg if ($fg);
 116         +               $preserved .= '; ' if ($fg && $bg);
 117         +               $preserved .= 'background-color: '.$bg if ($bg);
 118         +               $preserved .= '} SROLOC;TEXT {'.$text.'} TXET';
 119         +       }
 120         +
 121         +       return $preserved;
 122         +
 123         +} #}}}
 124         +
 125         +sub replace_preserved_style(@) { #{{{
 126         +       my $content = shift;
 127         +
 128         +       if ($content) {
 129         +               $content =~ s/COLORS {/<span style="/;
 130         +               $content =~ s/} SROLOC;TEXT {/">/;
 131         +               $content =~ s/} TXET/<\/span>/;
 132         +       }
 133         +
 134         +       return $content;
 135         +} #}}}
 136         +
 137         +sub preprocess (@) { #{{{
 138         +       return preserve_style($_[0], $_[2]);
 139         +} #}}}
 140         +
 141         +sub sanitize (@) { #{{{
 142         +       my %params = @_;
 143         +
 144         +       return replace_preserved_style($params{content})
 145         +               if (exists $params{content})
 146         +} #}}}
 147         +
 148         +1
 149         --- /dev/null   2008-07-24 09:38:19.000000000 +0200
 150         +++ color.mdwn  2008-07-25 14:50:19.000000000 +0200
 151         @@ -0,0 +1,31 @@
 152         +\[[!template id=plugin name=color core=0 author="[[Paweł Tęcza|ptecza]]"]]
 153         +
 154         +This plugin can be used to color a piece of text on Ikiwiki page.
 155         +It's possible setting foreground and/or background color of the text.
 156         +
 157         +The plugin syntax is very simple. You only need to type name (e.g. `white`)
 158         +or HTML code of colors (e.g. `#ffffff`) and a text you want to color.
 159         +The colors should by separated using a comma character.
 160         +
 161         +Below are a few examples:
 162         +
 163         +    \[[!color white,#ff0000 "White text on red background"]]
 164         +
 165         +Foreground color is defined as a word, background color is defined as HTML
 166         +color code.
 167         +
 168         +    \[[!color white "White text on default color background"]]
 169         +
 170         +Foreground color is default color if only one color was typed and a comma
 171         +character is missing.
 172         +
 173         +    \[[!color white, "White text on default color background"]]
 174         +
 175         +Background color is missing, so the text is displayed on default background.
 176         +
 177         +    \[[!color ,#ff0000 "Default color text on red background"]]
 178         +
 179         +Foreground is missing, so the text has default color.
 180         +
 181         +This plugin is not enabled by default. You can do that in [[ikiwiki.setup]]
 182         +file (hint: `add_plugins` variable).