2008-07-14 17:29:19 +02:00
|
|
|
|
Recently I've wanted to colour some piece of text on my Ikiwiki page.
|
|
|
|
|
It seems that Markdown can do it only using HTML tags, so I used
|
2008-07-15 10:12:13 +02:00
|
|
|
|
`<span class="color">foo bar baz</span>`.
|
2008-07-14 17:29:19 +02:00
|
|
|
|
|
|
|
|
|
However, in my opinion mixing Markdown syntax and HTML tags is rather ugly,
|
|
|
|
|
so maybe we should create a new color plugin to add more color to Ikiwiki ;)
|
|
|
|
|
I know that another Wikis have similar plugin, for example
|
|
|
|
|
[WikiDot](http://www.wikidot.com/).
|
|
|
|
|
|
|
|
|
|
I've noticed that htmlscrubber plugin strips `style` attribute, because of
|
|
|
|
|
security, so probably we need to use `class` attribute of HTML. But then
|
|
|
|
|
we have to customize our `local.css` file to add all color we want to use.
|
|
|
|
|
It's not as easy in usage like color name or definition as plugin argument,
|
|
|
|
|
but I don't have a better idea right now.
|
|
|
|
|
|
|
|
|
|
What do you think about it? --[[Paweł|ptecza]]
|
2008-07-14 22:08:54 +02:00
|
|
|
|
|
|
|
|
|
> Making a plugin preserve style attributes can be done, it just has to add
|
|
|
|
|
> them after the sanitize step, which strips them. The general method is
|
|
|
|
|
> adding placeholders first, and replacing them with the real html later.
|
|
|
|
|
>
|
|
|
|
|
> The hard thing to me seems to be finding a syntax that is better than a
|
|
|
|
|
> `<span>`. A preprocessor directive is not really any less ugly than html
|
|
|
|
|
> tags, though at least it could play nicely with nested markdown: --[[Joey]]
|
|
|
|
|
>
|
2008-07-21 13:45:54 +02:00
|
|
|
|
> \[[!color red,green """
|
2008-07-14 22:08:54 +02:00
|
|
|
|
> Xmas-colored markdown here
|
|
|
|
|
> """]]
|
2008-07-15 10:12:13 +02:00
|
|
|
|
|
|
|
|
|
>> I'm glad you like that idea. In my opinion your syntax looks good.
|
|
|
|
|
>> Out of curiosity, why did you used 2 colors in your example? What is HTML
|
|
|
|
|
>> result for it? ;)
|
|
|
|
|
|
2008-07-16 23:50:51 +02:00
|
|
|
|
>>> I was thinking one would be foreground, the other background. Don't
|
|
|
|
|
>>> know if setting the background makes sense or not.
|
|
|
|
|
|
2008-07-15 10:12:13 +02:00
|
|
|
|
>> I can try to create that plugin, if you are too busy now. I'm not Perl
|
|
|
|
|
>> hacker, but I wrote a lot of Perl scripts in my life and color plugin
|
|
|
|
|
>> doesn't seem to be very hard task. --[[Paweł|ptecza]]
|
2008-07-16 23:50:51 +02:00
|
|
|
|
|
|
|
|
|
>> Yes, it's a good intro plugin, have at it! --[[Joey]]
|
2008-07-25 14:59:23 +02:00
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
This is a RC1 of my `color` plugin. It works for me well, but all your
|
|
|
|
|
comments are very welcome. --[[Paweł|ptecza]]
|
|
|
|
|
|
2008-07-25 21:53:46 +02:00
|
|
|
|
> Sure, I have a couple.
|
2008-07-26 15:42:27 +02:00
|
|
|
|
|
|
|
|
|
>> Great! Thank you very much! --[[Paweł|ptecza]]
|
|
|
|
|
|
2008-07-25 21:53:46 +02:00
|
|
|
|
> The preprocess function is passed named parameters. The hack you have of
|
|
|
|
|
> hardcoding use of `$_[0]` and `$_[2]` can fail at any time.
|
2008-07-26 15:42:27 +02:00
|
|
|
|
|
|
|
|
|
>> But the problem is that arguments of my plugin don't have a name.
|
|
|
|
|
>> How can I identify them in `params` hash?
|
|
|
|
|
|
|
|
|
|
>> Similar hardcoded method I've found in `img` plugin :) But only one
|
|
|
|
|
>> argument is not named there (image path).
|
|
|
|
|
|
2008-07-31 22:36:56 +02:00
|
|
|
|
>>> I think I hadn't realized what you were doing there. The order
|
|
|
|
|
>>> for unnamed parameters can in fact be relied on.
|
|
|
|
|
>>>
|
|
|
|
|
>>> --[[Joey]]
|
|
|
|
|
|
2008-07-26 15:42:27 +02:00
|
|
|
|
>> Maybe I shouldn't use so simple plugin syntax? For following syntax
|
|
|
|
|
>> I wouldn't have that problem:
|
|
|
|
|
|
|
|
|
|
>> \[[!color fg=white bg=red text="White text on red background"]]
|
|
|
|
|
|
2008-07-25 21:53:46 +02:00
|
|
|
|
> `replace_preserved_style` is passed a single parameter, so its prototype
|
|
|
|
|
> should be `($)`, not `(@)`. Ditt `preserve_style`, it should have
|
|
|
|
|
> `($$)`.
|
2008-07-26 15:42:27 +02:00
|
|
|
|
|
|
|
|
|
>> OK, it will be fixed.
|
|
|
|
|
|
2008-07-25 21:53:46 +02:00
|
|
|
|
> The sanitize hook is always passed `$params{content}`, so there should be
|
|
|
|
|
> no reason to check that it exists. Also, it shouldn't be done in a
|
|
|
|
|
> sanitize hook, since html sanitization could run _after_ that santize
|
|
|
|
|
> hook. It should use a format hook.
|
2008-07-26 15:42:27 +02:00
|
|
|
|
|
|
|
|
|
>> Probably you're right. It was rather paranoid checking ;) Thanks for
|
|
|
|
|
>> the hook hint!
|
|
|
|
|
|
2008-07-25 21:53:46 +02:00
|
|
|
|
> The preprocess hook needs to call `IkiWiki::preprocess` on the content
|
|
|
|
|
> passed into it if you want to support nesting other preprocessor
|
|
|
|
|
> directives inside the color directive. See `preprocess_toggleable` in the
|
|
|
|
|
> toggle plugin, for example.
|
|
|
|
|
>
|
|
|
|
|
> I'm not a big fan of the dummy text `COLORS { ... } SROLOC;TEXT { ... TXET }`
|
|
|
|
|
> The method used by toggle of using two real `<div>`s seems slightly
|
|
|
|
|
> better. --[[Joey]]
|
|
|
|
|
|
2008-07-26 15:42:27 +02:00
|
|
|
|
>> I don't like that too, but I didn't have better idea :) Thank you for
|
|
|
|
|
>> the hint! I'll take a look at `toggle` plugin.
|
|
|
|
|
|
2008-07-27 15:30:55 +02:00
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
And here is RC2 of that plugin. I've changed a plugin syntax, because the old
|
|
|
|
|
seems to be too enigmatic and it was hard to me to handle unnamed parameters
|
|
|
|
|
in not hardcoded way. I hope that my changes are acceptable for you.
|
|
|
|
|
Of course, I'm open for discussion or exchange of ideas :) --[[Paweł|ptecza]]
|
|
|
|
|
|
2008-07-31 22:36:56 +02:00
|
|
|
|
> One question, why the 2px padding for span.color? --[[Joey]]
|
|
|
|
|
|
2008-07-27 15:30:55 +02:00
|
|
|
|
--- /dev/null 2008-06-21 02:02:15.000000000 +0200
|
|
|
|
|
+++ color.pm 2008-07-27 14:58:12.000000000 +0200
|
|
|
|
|
@@ -0,0 +1,69 @@
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+#!/usr/bin/perl
|
|
|
|
|
+# Ikiwiki text colouring plugin
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+# Paweł‚ Tęcza <ptecza@net.icm.edu.pl>
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+package IkiWiki::Plugin::color;
|
|
|
|
|
+
|
|
|
|
|
+use warnings;
|
|
|
|
|
+use strict;
|
|
|
|
|
+use IkiWiki 2.00;
|
|
|
|
|
+
|
|
|
|
|
+sub import { #{{{
|
|
|
|
|
+ hook(type => "preprocess", id => "color", call => \&preprocess);
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+ hook(type => "format", id => "color", call => \&format);
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+} #}}}
|
|
|
|
|
+
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+sub preserve_style($$$) { #{{{
|
|
|
|
|
+ my $foreground = shift;
|
|
|
|
|
+ my $background = shift;
|
|
|
|
|
+ my $text = shift;
|
|
|
|
|
+
|
|
|
|
|
+ $foreground = defined $foreground ? lc($foreground) : '';
|
|
|
|
|
+ $background = defined $background ? lc($background) : '';
|
|
|
|
|
+ $text = '' unless (defined $text);
|
|
|
|
|
+
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+ # Validate colors. Only color name or color code are valid.
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+ $foreground = '' unless ($foreground &&
|
|
|
|
|
+ ($foreground =~ /^[a-z]+$/ || $foreground =~ /^#[0-9a-f]{3,6}$/));
|
|
|
|
|
+ $background = '' unless ($background &&
|
|
|
|
|
+ ($background =~ /^[a-z]+$/ || $background =~ /^#[0-9a-f]{3,6}$/));
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+
|
|
|
|
|
+ my $preserved = '';
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+ $preserved .= '<span class="color">';
|
|
|
|
|
+ $preserved .= 'color: '.$foreground if ($foreground);
|
|
|
|
|
+ $preserved .= '; ' if ($foreground && $background);
|
|
|
|
|
+ $preserved .= 'background-color: '.$background if ($background);
|
|
|
|
|
+ $preserved .= '</span>';
|
|
|
|
|
+ $preserved .= '<span class="colorend">'.$text.'</span>';
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+
|
|
|
|
|
+ return $preserved;
|
|
|
|
|
+
|
|
|
|
|
+} #}}}
|
|
|
|
|
+
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+sub replace_preserved_style($) { #{{{
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+ my $content = shift;
|
|
|
|
|
+
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+ $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;
|
|
|
|
|
+ $content =~ s!<span class="colorend">!!g;
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+
|
2008-07-31 22:36:56 +02:00
|
|
|
|
+ return $content;
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+} #}}}
|
|
|
|
|
+
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+sub preprocess(@) { #{{{
|
|
|
|
|
+ my %params = @_;
|
|
|
|
|
+
|
|
|
|
|
+ # Preprocess the text to expand any preprocessor directives
|
|
|
|
|
+ # embedded inside it.
|
|
|
|
|
+ $params{text} = IkiWiki::preprocess($params{page}, $params{destpage},
|
|
|
|
|
+ IkiWiki::filter($params{page}, $params{destpage}, $params{text}));
|
|
|
|
|
+
|
|
|
|
|
+ return preserve_style($params{foreground}, $params{background}, $params{text});
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+} #}}}
|
|
|
|
|
+
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+sub format(@) { #{{{
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+ my %params = @_;
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+
|
|
|
|
|
+ $params{content} = replace_preserved_style($params{content});
|
|
|
|
|
+ return $params{content};
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+} #}}}
|
|
|
|
|
+
|
|
|
|
|
+1
|
2008-07-27 15:30:55 +02:00
|
|
|
|
--- /dev/null 2008-06-21 02:02:15.000000000 +0200
|
|
|
|
|
+++ color.mdwn 2008-07-27 15:04:42.000000000 +0200
|
|
|
|
|
@@ -0,0 +1,25 @@
|
|
|
|
|
+\[[!template id=plugin name=color core=0 author="[[ptecza]]"]]
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+
|
|
|
|
|
+This plugin can be used to color a piece of text on Ikiwiki page.
|
|
|
|
|
+It's possible setting foreground and/or background color of the text.
|
|
|
|
|
+
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+You can use name (e.g. `white`) or HTML code of colors (e.g. `#ffffff`)
|
|
|
|
|
+to define colors.
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+
|
|
|
|
|
+Below are a few examples:
|
|
|
|
|
+
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+ \[[!color foreground=white background=#ff0000 text="White text on red background"]]
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+
|
|
|
|
|
+Foreground color is defined as a word, background color is defined as HTML
|
|
|
|
|
+color code.
|
|
|
|
|
+
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+ \[[!color foreground=white text="White text on default color background"]]
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+
|
|
|
|
|
+Background color is missing, so the text is displayed on default background.
|
|
|
|
|
+
|
2008-07-27 15:30:55 +02:00
|
|
|
|
+ \[[!color background=#ff0000 text="Default color text on red background"]]
|
2008-07-25 14:59:23 +02:00
|
|
|
|
+
|
|
|
|
|
+Foreground is missing, so the text has default color.
|
|
|
|
|
+
|
|
|
|
|
+This plugin is not enabled by default. You can do that in [[ikiwiki.setup]]
|
|
|
|
|
+file (hint: `add_plugins` variable).
|
2008-07-27 15:30:55 +02:00
|
|
|
|
--- style.css-orig 2008-07-27 15:12:39.000000000 +0200
|
|
|
|
|
+++ style.css 2008-07-27 15:15:06.000000000 +0200
|
|
|
|
|
@@ -333,3 +333,7 @@
|
|
|
|
|
background: #eee;
|
|
|
|
|
color: black !important;
|
|
|
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+span.color {
|
|
|
|
|
+ padding: 2px;
|
|
|
|
|
+}
|