Differences

This shows you the differences between two versions of the page.

--- plugin:color [2016-06-25 15:01] – leeyc0 is willing to hand over the project 119.246.49.224
+++ plugin:color [2024-02-08 08:12] (current) – rnck
@@ Line 2: / Line 2: @@
 ---- plugin ----
-description: Opportunity to write colored text in DokuWiki.
+description: Opportunity to write colored text in DokuWiki
-author     : Christopher Smith
+author     : Harald Hanche-Olsen
-email      : chris@jalakai.co.uk
+email      : harald.hanche-olsen@ntnu.no
 type       : Syntax
-lastupdate : 2016-06-25
+lastupdate : 2022-10-19
-compatible : 2009-12-25, 2010-11-07, 2011-05-25, 2012-01-25, 2014-05-05, 2014-09-29d, Adora Belle, Weatherwax, Binky, Ponder Stibbons, Detritus
+compatible : Adora Belle, Weatherwax, Binky, Ponder Stibbons, Detritus, Elenor Of Tsort, Frusterick Manners, Greebo, Hogfather, Igor, Jack Jackrum, Kaos
 depends    :
 conflicts  :
-similar    : fontcolor
+similar    : fontcolor, emphasis, wrap
-tags       : typography, highlight
+tags       : typography, highlight, color, text
-downloadurl: https://github.com/leeyc0/dokuwiki_plugin_color/zipball/master
+downloadurl: https://github.com/hanche/dokuwiki_color_plugin/archive/refs/tags/2022-10-19.tar.gz
-sourcerepo : https://github.com/leeyc0/dokuwiki_plugin_color/
+sourcerepo : https://github.com/hanche/dokuwiki_color_plugin
+bugtracker : https://github.com/hanche/dokuwiki_color_plugin/issues
+screenshot_img: https://folk.ntnu.no/hanche/tmp/dokuwiki_color_plugin.png
 ----
-===== Disclaimer =====
-Christopher Smith seems leaved the plugin unmaintained. Another user leeyc0 provided hosting of the plugin in the github, but have no time to maintain it. Anyone interested in maintainining may leave a ticket in github and leeyc0 will be glad to hand over the project
 ===== Installation =====
-Please use the plugin manager to install the plugin, no configuration needed.
+Please use the [[plugin:extension|extension manager]] to install the plugin, no configuration needed.
 ===== Usage =====
@@ Line 30: / Line 29: @@
 <code>
+<color green>text</color>
 <color blue/lightgrey>text</color>
 <color #FF0000>text</color>
+<color /#FFff00>text</color>
+<color rgb(80%,0%,0%)/rgb(100%,80%,100%)>text</color>
+<color hsl(120,100%,30%):hsl(180,50%,90%)>text</color>
 </code>
-This plugin supports the [[https://en.wikipedia.org/wiki/X11_color_names#Color_name_chart| X11 color names ]]
+and you will see something like this:
-===== Discussion =====
+{{https://folk.ntnu.no/hanche/tmp/dokuwiki_color_plugin.png|Color plugin in action}}
-This source for this plugin is shown in the [[devel:Syntax Plugins#sample_plugin_2_-_color|Sample Plugin Tutorial]].
+The foreground or background color specification can be any valid CSS color specification. Beware that some older browsers will not recognise all color specs in the latest CSS version.
-===== Update History =====
+If you use a color specification that contains a slash (''/''), you must use a colon ('':'') to separate the foreground and background color specs.
-  * 2008-02-06 --- Fixed a security vulnerability in the colour pattern.  Any users of this plugin should apply this update.  --- //[[chris@jalakai.co.uk|Christopher Smith]] 2008-02-06 17:20//
+The precise syntax is as follows. Square brackets (''[]'') indicate optional parts, and should //not// be included literally:
-  * 2014-01-04 hosted in github by leeyc0
+<code>
-  * 2016-06-25 Added ODT support based on branch "redesign"
+<color [⟨fg-color⟩][/⟨bg-color⟩]>⟨text⟩</color>
+<color [⟨fg-color⟩]:[⟨bg-color⟩]>⟨text⟩</color>
+</code>
+You //must// use the second form if either color spec includes a slash.
+Note that in that case, the colon separater ('':'') is mandatory.
-===== Version with ODT renderer support =====
+No valid color spec including a colon is known at this time, but if you need to use one in the future, you //must// use the first form. This plugin does not provide a way to combine these.
-This modified version is no more suitable for a simple tutorial example. But I needed the ODT renderer support ;-)
+The result is ⟨text⟩ shown with foreground color ⟨fg-color⟩ and background color ⟨bg-color⟩. If either color is omitted or empty, the foreground or background color of the surrounding text is used.
- --- //[[birke@d-scribe.de|Gabriel Birke]] 2008/05/09 11:46//
-> Ooops. The version picked up to add ODT support was from before the 2008-02-06 version (which fixed a Cross Site Scripting vulnerability). So the ODT version was again vulnerable. Now fixed again.  --- //[[dokuwiki@andywebber.com|Andy Webber]] 2009/06/24 16:16//
-Hello,
+Example – note the mandatory colon here:
-I put this plugin on our wiki.
-That work well in the wiki but not at the time of export in odt.
-At which place must be located the colornames.php ?
-Do I use the last version of the plugin odt, have a solution? //cedric 2010/01/11 //
-> Hey, Cedric. ''colornames.php'' should go in the same directory as ''syntax.php'' if I am reading the source all right.  --- [[user>ryan.chappelle|Luis Machuca Bezzaza]] //2011/06/13 10:06//
+<code>
+<color hwb(120 20% 30% / 50%):>some faded dark green semi-transparent text</color>
+</code>
-<file php syntax.php>
+Harmless restriction:
-<?php
+This plugin now allows any color specification not containing single or double quotes or any of the symbols ''%%< > & ; %%''. It does not try to check if the specification is valid CSS. This is to accommodate the CSS 4 color specifications, as well as any future color specifications – so long as they do not use any of the “forbidden” characters.
-/**
- * Plugin Color: Sets new colors for text and background.
- *
- * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
- * @author     Christopher Smith <chris@jalakai.co.uk>
- */
-// must be run within DokuWiki
-if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/');
-if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
-require_once(DOKU_PLUGIN.'syntax.php');
-/**
- * All DokuWiki plugins to extend the parser/rendering mechanism
- * need to inherit from this class
- */
-class syntax_plugin_color extends DokuWiki_Syntax_Plugin {
-    var $odt_styles = array();
-    /**
-     * return some info
-     */
-    function getInfo(){
-        return array(
-            'author' => 'Christopher Smith',
-            'email'  => 'chris@jalakai.co.uk',
-            'date'   => '2009-06-24',
-            'name'   => 'Color Plugin with ODT',
-            'desc'   => 'Changes text colour and background',
-            'url'    => 'http://www.dokuwiki.org/plugin:color',
-        );
-    }
-    function getType(){ return 'formatting'; }
-    function getAllowedTypes() { return array('formatting', 'substition', 'disabled'); }
-    function getSort(){ return 158; }
-    function connectTo($mode) { $this->Lexer->addEntryPattern('<color.*?>(?=.*?</color>)',$mode,'plugin_color'); }
-    function postConnect() { $this->Lexer->addExitPattern('</color>','plugin_color'); }
-    /**
-     * Handle the match
-     */
-    function handle($match, $state, $pos, &$handler){
-        switch ($state) {
-          case DOKU_LEXER_ENTER :
-                list($color, $background) = preg_split("/\//u", substr($match, 6, -1), 2);
-                $color = $this->_isValid($color);
-                $background = $this->_isValid($background);
-                return array($state, array($color, $background));
-          case DOKU_LEXER_UNMATCHED :  return array($state, $match);
-          case DOKU_LEXER_EXIT :       return array($state, '');
-        }
-        return array();
-    }
-    /**
-     * Create output
-     */
-    function render($mode, &$renderer, $data) {
-        if($mode == 'xhtml'){
-            list($state, $match) = $data;
-            switch ($state) {
-              case DOKU_LEXER_ENTER :
-                list($color, $background) = $match;
-                $color = $color?"color:$color;":"";
-                $background = $background?"background-color:$background;":"";
-                $renderer->doc .= "<span style='$color $background'>";
-                break;
-              case DOKU_LEXER_UNMATCHED :  $renderer->doc .= $renderer->_xmlEntities($match); break;
-              case DOKU_LEXER_EXIT :       $renderer->doc .= "</span>"; break;
-            }
-            return true;
-        }
-        if($mode == 'odt'){
-          list($state, $match) = $data;
-            switch ($state) {
-              case DOKU_LEXER_ENTER :
-                list($color, $background) = $match;
-                $style_index = $color.'/'.$background;
-                if(empty($this->odt_styles[$style_index]))
-                {
-                  $stylename = "ColorizedText".count($this->odt_styles);
-                  $this->odt_styles[$style_index] = $stylename;
-                  $color = $color?'fo:color="'.$this->_color2hex($color).'" ':'';
-                  $background = $background?'fo:background="'.$this->_color2hex($background).'" ':'';
-                  $renderer->autostyles[$stylename] = '
-                  <style:style style:name="'.$stylename.'" style:family="text">
-                      <style:text-properties '.$color.$background.'/>
-                  </style:style>';
-                }
-                $renderer->doc .= '<text:span text:style-name="'.$this->odt_styles[$style_index].'">';
-                break;
-              case DOKU_LEXER_UNMATCHED :  $renderer->doc .= $renderer->_xmlEntities($match); break;
-              case DOKU_LEXER_EXIT :       $renderer->doc .= "</text:span>"; break;
-            }
-            return true;
-        }
-        return false;
-    }
-    // validate color value $c
-    // this is cut price validation - only to ensure the basic format is correct and there is nothing harmful
-    // three basic formats  "colorname", "#fff[fff]", "rgb(255[%],255[%],255[%])"
-    function _isValid($c) {
-        $c = trim($c);
-        $pattern = "/^\s*(
-            ([a-zA-Z]+)|                                #colorname - not verified
-            (\#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}))|        #colorvalue
-            (rgb\(([0-9]{1,3}%?,){2}[0-9]{1,3}%?\))     #rgb triplet
-            )\s*$/x";
-        if (preg_match($pattern, $c)) return $c;
-        return "";
-    }
-    /**
-     * Translate color names and RGB to hex values
-     */
-    function _color2hex($name)
-    {
-      static $colornames = null;
-      if(is_null($colornames))
-      {
-        include dirname(__FILE__).'/colornames.php';
-      }
-      if(!preg_match('/^(#|rgb)/', $name) && array_key_exists($name, $colornames))
-        return $colornames[$name];
-      elseif(preg_match('/rgb\(([0-9]{1,3}%?),([0-9]{1,3}%?),([0-9]{1,3}%?)\)/', $name, $matches))
-      {
-        $colors = array();
-        for($i=1;$i<4;$i++)
-        {
-          $percent = substr($matches[$i], -1, 1) == '%';
-          $colors[$i] = $percent?(substr($matches[$i],0,-1)/100)*256:$matches[$i];
-        }
-        return sprintf('#%02X%02X%02X', $colors[1], $colors[2], $colors[3]);
-      }
-      else
-        return $name;
-    }
-}
+For a reference of usable color specifications, see
-//Setup VIM: ex: et ts=4 enc=utf-8 :
+[[https://developer.mozilla.org/en-US/docs/Web/CSS/color_value|the color page]] at developer.mozilla.org.
-</file>
+Beware that not all color specifications work on all browsers.
+See the bottom of the referenced page for more information, or
+check [[https://caniuse.com/|Can I Use]] if in doubt.
-<file php colornames.php>
+  * The plugin works by wrapping contents in a %%<span>%% element with a suitable %%style%% attribute. Therefore, you cannot wrap it around block level items such as headers, lists, and tables.
-<?php
+  * You cannot use it //inside// headers either, since [[faq:headerlinks|you can't use wiki syntax]] within a header.
+  * The use of two or more separators (slashes in the first syntax, colons in the second) within %%''<color …>''%% results in undefined behaviour.
-// HTML 4.01 color names
+===== Discussion =====
-$colornames = array(
-  'black'   => '#000000',
-  'navy'    => '#000080',
-  'blue'    => '#0000FF',
-  'green'   => '#008000',
-  'teal'    => '#008080',
-  'lime'    => '#00FF00',
-  'aqua'    => '#00FFFF',
-  'maroon'  => '#800000',
-  'purple'  => '#800080',
-  'olive'   => '#808000',
-  'gray'    => '#808080',
-  'silver'  => '#C0C0C0',
-  'red'     => '#FF0000',
-  'fuchsia' => '#FF00FF',
-  'yellow'  => '#FFFF00',
-  'white'   => '#FFFFFF',
-  'orange'  => '#FFA500', // From CSS 2.1 spec
-  //additional X11 colors, works nicely from Rincewind on.
-  'aliceblue'  =>  '#F0F8FF',
-'antiquewhite'  =>  '#FAEBD7',
-'aqua'  =>  '#00FFFF',
-'aquamarine'  =>  '#7FFFD4',
-'azure'  =>  '#F0FFFF',
-'beige'  =>  '#F5F5DC',
-'bisque'  =>  '#FFE4C4',
-'black'  =>  '#000000',
-'blanchedalmond'  =>  '#FFEBCD',
-'blue'  =>  '#0000FF',
-'blueviolet'  =>  '#8A2BE2',
-'brown'  =>  '#A52A2A',
-'burlywood'  =>  '#DEB887',
-'cadetblue'  =>  '#5F9EA0',
-'chartreuse'  =>  '#7FFF00',
-'chocolate'  =>  '#D2691E',
-'coral'  =>  '#FF7F50',
-'cornflower'  =>  '#6495ED',
-'cornsilk'  =>  '#FFF8DC',
-'crimson'  =>  '#DC143C',
-'cyan'  =>  '#00FFFF',
-'darkblue'  =>  '#00008B',
-'darkcyan'  =>  '#008B8B',
-'darkgoldenrod'  =>  '#B8860B',
-'darkgray'  =>  '#A9A9A9',
-'darkgreen'  =>  '#006400',
-'darkkhaki'  =>  '#BDB76B',
-'darkmagenta'  =>  '#8B008B',
-'darkolivegreen'  =>  '#556B2F',
-'darkorange'  =>  '#FF8C00',
-'darkorchid'  =>  '#9932CC',
-'darkred'  =>  '#8B0000',
-'darksalmon'  =>  '#E9967A',
-'darkseagreen'  =>  '#8FBC8F',
-'darkslateblue'  =>  '#483D8B',
-'darkslategray'  =>  '#2F4F4F',
-'darkturquoise'  =>  '#00CED1',
-'darkviolet'  =>  '#9400D3',
-'deeppink'  =>  '#FF1493',
-'deepskyblue'  =>  '#00BFFF',
-'dimgray'  =>  '#696969',
-'dodgerblue'  =>  '#1E90FF',
-'firebrick'  =>  '#B22222',
-'floralwhite'  =>  '#FFFAF0',
-'forestgreen'  =>  '#228B22',
-'fuchsia'  =>  '#FF00FF',
-'gainsboro'  =>  '#DCDCDC',
-'ghostwhite'  =>  '#F8F8FF',
-'gold'  =>  '#FFD700',
-'goldenrod'  =>  '#DAA520',
-'grayx11'  =>  '#BEBEBE',
-'gray'  =>  '#808080',
-'greenx11'  =>  '#00FF00',
-'green'  =>  '#008000',
-'greenyellow'  =>  '#ADFF2F',
-'honeydew'  =>  '#F0FFF0',
-'hotpink'  =>  '#FF69B4',
-'indianred'  =>  '#CD5C5C',
-'indigo'  =>  '#4B0082',
-'ivory'  =>  '#FFFFF0',
-'khaki'  =>  '#F0E68C',
-'lavender'  =>  '#E6E6FA',
-'lavenderblush'  =>  '#FFF0F5',
-'lawngreen'  =>  '#7CFC00',
-'lemonchiffon'  =>  '#FFFACD',
-'lightblue'  =>  '#ADD8E6',
-'lightcoral'  =>  '#F08080',
-'lightcyan'  =>  '#E0FFFF',
-'lightgoldenrod'  =>  '#FAFAD2',
-'lightgray'  =>  '#D3D3D3',
-'lightgreen'  =>  '#90EE90',
-'lightpink'  =>  '#FFB6C1',
-'lightsalmon'  =>  '#FFA07A',
-'lightseagreen'  =>  '#20B2AA',
-'lightskyblue'  =>  '#87CEFA',
-'lightslategray'  =>  '#778899',
-'lightsteelblue'  =>  '#B0C4DE',
-'lightyellow'  =>  '#FFFFE0',
-'lime'  =>  '#00FF00',
-'limegreen'  =>  '#32CD32',
-'linen'  =>  '#FAF0E6',
-'magenta'  =>  '#FF00FF',
-'maroonx11'  =>  '#B03060',
-'maroon'  =>  '#7F0000',
-'mediumaquamarine'  =>  '#66CDAA',
-'mediumblue'  =>  '#0000CD',
-'mediumorchid'  =>  '#BA55D3',
-'mediumpurple'  =>  '#9370DB',
-'mediumseagreen'  =>  '#3CB371',
-'mediumslateblue'  =>  '#7B68EE',
-'mediumspringgreen'  =>  '#00FA9A',
-'mediumturquoise'  =>  '#48D1CC',
-'mediumvioletred'  =>  '#C71585',
-'midnightblue'  =>  '#191970',
-'mintcream'  =>  '#F5FFFA',
-'mistyrose'  =>  '#FFE4E1',
-'moccasin'  =>  '#FFE4B5',
-'navajowhite'  =>  '#FFDEAD',
-'navy'  =>  '#000080',
-'oldlace'  =>  '#FDF5E6',
-'olive'  =>  '#808000',
-'olivedrab'  =>  '#6B8E23',
-'orange'  =>  '#FFA500',
-'orangered'  =>  '#FF4500',
-'orchid'  =>  '#DA70D6',
-'palegoldenrod'  =>  '#EEE8AA',
-'palegreen'  =>  '#98FB98',
-'paleturquoise'  =>  '#AFEEEE',
-'palevioletred'  =>  '#DB7093',
-'papayawhip'  =>  '#FFEFD5',
-'peachpuff'  =>  '#FFDAB9',
-'peru'  =>  '#CD853F',
-'pink'  =>  '#FFC0CB',
-'plum'  =>  '#DDA0DD',
-'powderblue'  =>  '#B0E0E6',
-'purplex11'  =>  '#A020F0',
-'purple'  =>  '#7F007F',
-'red'  =>  '#FF0000',
-'rosybrown'  =>  '#BC8F8F',
-'royalblue'  =>  '#4169E1',
-'saddlebrown'  =>  '#8B4513',
-'salmon'  =>  '#FA8072',
-'sandybrown'  =>  '#F4A460',
-'seagreen'  =>  '#2E8B57',
-'seashell'  =>  '#FFF5EE',
-'sienna'  =>  '#A0522D',
-'silver'  =>  '#C0C0C0',
-'skyblue'  =>  '#87CEEB',
-'slateblue'  =>  '#6A5ACD',
-'slategray'  =>  '#708090',
-'snow'  =>  '#FFFAFA',
-'springgreen'  =>  '#00FF7F',
-'steelblue'  =>  '#4682B4',
-'tan'  =>  '#D2B48C',
-'teal'  =>  '#008080',
-'thistle'  =>  '#D8BFD8',
-'tomato'  =>  '#FF6347',
-'turquoise'  =>  '#40E0D0',
-'violet'  =>  '#EE82EE',
-'wheat'  =>  '#F5DEB3',
-'white'  =>  '#FFFFFF',
-'whitesmoke'  =>  '#F5F5F5',
-'yellow'  =>  '#FFFF00',
-'yellowgreen'  =>  '#9ACD32' //from https://en.wikipedia.org/wiki/X11_color_names
-);
-</file>
-===== No header support =====
+This source for this plugin is shown in the [[devel:Syntax Plugins#sample_plugin_2_-_color|Sample Plugin Tutorial]].
-Hi there,
+===== Development =====
-i realized that coloring of headers is not possible. The //=// delimiters turn to plain text when wrapped with the color tag. It would be great to have that feature, if possible.\\
-Thanks for this otherwise awesome plugin!
-//rapho 2012/08/03//
-I agree that would be very helpful //newbie 2013/04/30//
+**Christopher Smith** seems to have left the plugin unmaintained. User **leeyc0** provided hosting of the plugin on github, but has no time to maintain it either. **Harald Hanche-Olsen** took over in October 2018. The plugin is considered fairly stable, though, and the new maintainer does not foresee a very active maintenance schedule. New feature requests will likely be rejected.
-This would be really nice //CyrilM 2013/07/12//
+===== Update History =====
-I like colourful headers as well. // HH 2014/07/29//
+  * 2022-10-19 Allow the use of a colon separator, so that the color specs may contain a slash
+  * 2022-10-16 Removed the (too stringent) syntax checking of the color specifications, in order to be able to handle CSS 4 colors and possible future color specs
-Mee Too //CW in Miami 2015/6/30//
+  * 2022-09-15 Removed deprecated and unnecessary (but harmless) code
+  * 2018-10-12 New maintainer
+  * 2018-10-10 Added support for rgb[a](…) and hsl[a](…) color specifications
+  * 2018-08-09 Added code for handling metadata to the render method
+  * 2016-06-25 Added ODT support based on branch "redesign"
+  * 2014-01-04 hosted in github by leeyc0
+  * 2008-02-06 --- Fixed a security vulnerability in the colour pattern. Any users of this plugin should apply this update.  --- //[[chris@jalakai.co.uk|Christopher Smith]] 2008-02-06 17:20//
-This plugin also supports background color, which is defined with ''<color blue/yellow> Blue text on yellow background</color>''.  //AndyF 2016/04/05//