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 >>> I think I hadn't realized what you were doing there. The order
  62 >>> for unnamed parameters can in fact be relied on.
  63 >>>
  64 >>> --[[Joey]]
  65
  66 >> Maybe I shouldn't use so simple plugin syntax? For following syntax
  67 >> I wouldn't have that problem:
  68
  69 >>     \[[!color fg=white bg=red text="White text on red background"]]
  70
  71 > `replace_preserved_style` is passed a single parameter, so its prototype
  72 > should be `($)`, not `(@)`.  Ditt `preserve_style`, it should have
  73 > `($$)`.
  74
  75 >> OK, it will be fixed.
  76
  77 > The sanitize hook is always passed `$params{content}`, so there should be
  78 > no reason to check that it exists. Also, it shouldn't be done in a
  79 > sanitize hook, since html sanitization could run _after_ that santize
  80 > hook. It should use a format hook.
  81
  82 >> Probably you're right. It was rather paranoid checking ;) Thanks for
  83 >> the hook hint!
  84
  85 > The preprocess hook needs to call `IkiWiki::preprocess` on the content
  86 > passed into it if you want to support nesting other preprocessor
  87 > directives inside the color directive. See `preprocess_toggleable` in the
  88 > toggle plugin, for example.
  89 >
  90 > I'm not a big fan of the dummy text `COLORS { ... } SROLOC;TEXT { ... TXET }`
  91 > The method used by toggle of using two real `<div>`s seems slightly
  92 > better. --[[Joey]]
  93
  94 >> I don't like that too, but I didn't have better idea :) Thank you for
  95 >> the hint! I'll take a look at `toggle` plugin.
  96
  97 ---
  98
  99 And here is RC2 of that plugin. I've changed a plugin syntax, because the old
 100 seems to be too enigmatic and it was hard to me to handle unnamed parameters
 101 in not hardcoded way. I hope that my changes are acceptable for you.
 102 Of course, I'm open for discussion or exchange of ideas :) --[[Paweł|ptecza]]
 103
 104 > One question, why the 2px padding for span.color? --[[Joey]]
 105
 106 >> Sorry for a long silence, but I had Internet free summer holiday :)
 107 >> I did that, because backgrounded text without any padding looks
 108 >> strange for me ;) You can remove it if you don't like that padding.
 109 >> --[[Paweł|ptecza]]
 110
 111 >>> Joey, will you add that plugin to Ikiwiki 2.61? :) --[[Paweł|ptecza]]
 112
 113 >>>> I also had a long net-free summer holiday. :-) The [[patch]] is
 114 >>>> ready for integration (made a few minor changes). Is this GPL 2?
 115 >>>> --[[Joey]]
 116
 117         --- /dev/null   2008-06-21 02:02:15.000000000 +0200
 118         +++ color.pm    2008-07-27 14:58:12.000000000 +0200
 119         @@ -0,0 +1,69 @@
 120         +#!/usr/bin/perl
 121         +# Ikiwiki text colouring plugin
 122         +# Paweł‚ Tęcza <ptecza@net.icm.edu.pl>
 123         +package IkiWiki::Plugin::color;
 124         +
 125         +use warnings;
 126         +use strict;
 127         +use IkiWiki 2.00;
 128         +
 129         +sub import { #{{{
 130         +       hook(type => "preprocess", id => "color", call => \&preprocess);
 131         +       hook(type => "format",     id => "color", call => \&format);
 132         +} #}}}
 133         +
 134         +sub preserve_style ($$$) { #{{{
 135         +       my $foreground = shift;
 136         +       my $background = shift;
 137         +       my $text       = shift;
 138         +
 139         +       $foreground = defined $foreground ? lc($foreground) : '';
 140         +       $background = defined $background ? lc($background) : '';
 141         +       $text       = '' unless (defined $text);
 142         +
 143         +       # Validate colors. Only color name or color code are valid.
 144         +       $foreground = '' unless ($foreground &&
 145         +                               ($foreground =~ /^[a-z]+$/ || $foreground =~ /^#[0-9a-f]{3,6}$/));
 146         +       $background = '' unless ($background &&
 147         +                               ($background =~ /^[a-z]+$/ || $background =~ /^#[0-9a-f]{3,6}$/));
 148         +
 149         +       my $preserved = '';
 150         +       $preserved .= '<span class="color">';
 151         +       $preserved .= 'color: '.$foreground if ($foreground);
 152         +       $preserved .= '; ' if ($foreground && $background);
 153         +       $preserved .= 'background-color: '.$background if ($background);
 154         +       $preserved .= '</span>';
 155         +       $preserved .= '<span class="colorend">'.$text.'</span>';
 156         +
 157         +       return $preserved;
 158         +
 159         +} #}}}
 160         +
 161         +sub replace_preserved_style ($) { #{{{
 162         +       my $content = shift;
 163         +
 164         +       $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;
 165         +       $content =~ s!<span class="colorend">!!g;
 166         +
 167         +       return $content;
 168         +} #}}}
 169         +
 170         +sub preprocess (@) { #{{{
 171         +       my %params = @_;
 172         +
 173         +       # Preprocess the text to expand any preprocessor directives
 174         +       # embedded inside it.
 175         +       $params{text} = IkiWiki::preprocess($params{page}, $params{destpage},
 176         +                               IkiWiki::filter($params{page}, $params{destpage}, $params{text}));
 177         +
 178         +       return preserve_style($params{foreground}, $params{background}, $params{text});
 179         +} #}}}
 180         +
 181         +sub format (@) { #{{{
 182         +       my %params = @_;
 183         +
 184         +       $params{content} = replace_preserved_style($params{content});
 185         +       return $params{content};
 186         +} #}}}
 187         +
 188         +1
 189         --- /dev/null   2008-06-21 02:02:15.000000000 +0200
 190         +++ color.mdwn  2008-07-27 15:04:42.000000000 +0200
 191         @@ -0,0 +1,25 @@
 192         +\[[!template id=plugin name=color core=0 author="[[ptecza]]"]]
 193         +
 194         +This plugin can be used to color a piece of text on a page.
 195         +It can be used to set the foreground and/or background color of the text.
 196         +
 197         +You can use a color name (e.g. `white`) or HTML code (e.g. `#ffffff`)
 198         +to define colors.
 199         +
 200         +Below are a few examples:
 201         +
 202         +    \[[!color foreground=white background=#ff0000 text="White text on red background"]]
 203         +
 204         +In the above example, the foreground color is defined as a word, while the background color is defined as a HTML
 205         +color code.
 206         +
 207         +    \[[!color foreground=white text="White text on default color background"]]
 208         +
 209         +The background color is missing, so the text is displayed on default background.
 210         +
 211         +    \[[!color background=#ff0000 text="Default color text on red background"]]
 212         +
 213         +The foreground is missing, so the text has the default foreground color.
 214         --- style.css-orig      2008-07-27 15:12:39.000000000 +0200
 215         +++ style.css   2008-07-27 15:15:06.000000000 +0200
 216         @@ -333,3 +333,7 @@
 217                 background: #eee;
 218                 color: black !important;
 219          }
 220         +
 221         +span.color {
 222         +       padding: 2px;
 223         +}