plugin:styler
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
plugin:styler [2021-02-27 13:20] – Fix typo AnaelMobilia | plugin:styler [2023-10-31 01:06] (current) – Klap-in | ||
---|---|---|---|
Line 7: | Line 7: | ||
type : syntax | type : syntax | ||
lastupdate : 2021-02-27 | lastupdate : 2021-02-27 | ||
- | compatible : 2020-07-29 " | + | compatible : Elenor of Tsort, Frusterick Manners, |
depends | depends | ||
conflicts | conflicts | ||
Line 13: | Line 13: | ||
tags : style, boxes, typography, quotes | tags : style, boxes, typography, quotes | ||
downloadurl: | downloadurl: | ||
+ | bugtracker : https:// | ||
+ | sourcerepo : https:// | ||
---- | ---- | ||
Line 34: | Line 36: | ||
* '' | * '' | ||
* '' | * '' | ||
- | |||
- | |||
- | |||
- | ===== Contribution: | ||
- | :!: This code is for 2007-07-23 release ONLY. It need to be adapted to be used with 2021-02-27 release. | ||
- | |||
- | A contribution for this great plugin. This extends the attributes to allow to select background and border colors in a block, width size, and nested blocks. | ||
- | --- // | ||
- | |||
- | The extend attributes are: | ||
- | |||
- | ==== Background Light Colors ==== | ||
- | |||
- | To fill in with a specific background **light** color | ||
- | |||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | |||
- | **example: | ||
- | |||
- | < | ||
- | |||
- | ==== Background Dark colors ==== | ||
- | |||
- | To fill in with a specific background **dark** color and text in white | ||
- | |||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | |||
- | **example: | ||
- | |||
- | < | ||
- | |||
- | ==== Borders colors ==== | ||
- | |||
- | To draw a border around of the block with a dark color; | ||
- | |||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | |||
- | **example: | ||
- | |||
- | < | ||
- | |||
- | ==== Sizes ==== | ||
- | |||
- | You can specify a width to your block. | ||
- | |||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | |||
- | **example 1:** Draw two blocks in the same row (floating-left) | ||
- | |||
- | < | ||
- | <style background-lorange box-dorange float-left s50>some text</ | ||
- | <style background-lorange box-dorange float-left s50>some text</ | ||
- | </ | ||
- | |||
- | **example 2:** Draw three blocks in the same row (floating-left) | ||
- | |||
- | < | ||
- | <style background-lorange box-dorange float-left s50>some text</ | ||
- | <style background-lorange box-dorange float-left s25>some text</ | ||
- | <style background-lorange box-dorange float-left s25>some text</ | ||
- | </ | ||
- | |||
- | ==== Clear attributes ==== | ||
- | |||
- | To apply clear attribute when floating blocks | ||
- | |||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | |||
- | ==== Nested blocks ==== | ||
- | |||
- | **example: | ||
- | |||
- | < | ||
- | <style background-lorange box-dorange float-left s50> | ||
- | <style background-dgreen center> | ||
- | Here your text | ||
- | </ | ||
- | </ | ||
- | |||
- | ===== About this ===== | ||
- | |||
- | Just replace the files in the styler plugin. | ||
- | |||
- | If you have installed styler, don't forget to reset the DokuWiki cache. To do this, add **? | ||
- | |||
- | ===== styler.php ===== | ||
- | |||
- | <code php styler.php> | ||
- | <?php | ||
- | |||
- | /** | ||
- | * Plugin Style: More styles for DokuWiki | ||
- | * Format: see README | ||
- | * | ||
- | * @license | ||
- | * @author | ||
- | * @page | ||
- | * @version 0.2 | ||
- | */ | ||
- | |||
- | if(!defined(' | ||
- | if(!defined(' | ||
- | require_once(DOKU_PLUGIN.' | ||
- | |||
- | /** | ||
- | * All DokuWiki plugins to extend the parser/ | ||
- | * need to inherit from this class | ||
- | */ | ||
- | class syntax_plugin_styler_styler extends DokuWiki_Syntax_Plugin { | ||
- | |||
- | /** | ||
- | * return some info | ||
- | */ | ||
- | function getInfo(){ | ||
- | return array( | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ); | ||
- | } | ||
- | |||
- | function getType(){ return ' | ||
- | function getAllowedTypes() { return array(' | ||
- | //function getAllowedTypes() { return array(' | ||
- | function getPType(){ return ' | ||
- | |||
- | function getSort(){ return 205; } | ||
- | | ||
- | // override default accepts() method to allow nesting | ||
- | // - ie, to get the plugin accepts its own entry syntax (vmc) | ||
- | function accepts($mode) { | ||
- | if ($mode == substr(get_class($this), | ||
- | return parent:: | ||
- | } | ||
- | |||
- | function connectTo($mode) { | ||
- | / | ||
- | $this-> | ||
- | $this-> | ||
- | $this-> | ||
- | $this-> | ||
- | $this-> | ||
- | } | ||
- | |||
- | function postConnect() { | ||
- | $this-> | ||
- | $this-> | ||
- | $this-> | ||
- | } | ||
- | |||
- | /** | ||
- | * Handle the match | ||
- | */ | ||
- | function handle($match, | ||
- | global $conf; | ||
- | switch ($state) { | ||
- | case DOKU_LEXER_ENTER : | ||
- | $match = str_replace(array('<', | ||
- | $attrib = preg_split('/ | ||
- | if ($attrib[0]) | ||
- | { | ||
- | return array(array_shift($attrib), | ||
- | } | ||
- | else | ||
- | { | ||
- | return array($match, | ||
- | } | ||
- | case DOKU_LEXER_UNMATCHED : return array($match, | ||
- | case DOKU_LEXER_EXIT : return array('', | ||
- | } | ||
- | return array(); | ||
- | } | ||
- | |||
- | /** | ||
- | * Create output | ||
- | */ | ||
- | function render($mode, | ||
- | global $st; | ||
- | global $et; | ||
- | global $conf; | ||
- | global $prt; | ||
- | if($mode == ' | ||
- | switch ($data[1]) { | ||
- | case DOKU_LEXER_ENTER : | ||
- | $class = ''; | ||
- | foreach(array(' | ||
- | { | ||
- | if (in_array($v, | ||
- | { | ||
- | $class .= ' styler-' | ||
- | } | ||
- | } | ||
- | $renderer-> | ||
- | if ($data[0] == ' | ||
- | { | ||
- | $renderer-> | ||
- | } | ||
- | elseif ($data[0] == ' | ||
- | { | ||
- | $renderer-> | ||
- | } | ||
- | else | ||
- | { | ||
- | $renderer-> | ||
- | } | ||
- | break; | ||
- | case DOKU_LEXER_UNMATCHED : | ||
- | $renderer-> | ||
- | break; | ||
- | case DOKU_LEXER_EXIT : | ||
- | $renderer-> | ||
- | break; | ||
- | } | ||
- | return true; | ||
- | } | ||
- | return false; | ||
- | } | ||
- | } | ||
- | |||
- | //Setup VIM: ex: et ts=4 enc=utf-8 : | ||
- | </ | ||
- | |||
- | > It still work, but to me the lines with | ||
- | < | ||
- | $renderer-> | ||
- | </ | ||
- | > and | ||
- | < | ||
- | $renderer-> | ||
- | </ | ||
- | > generates invalid markup. Maybe it should be better a simple <br/> but I didn't understand the // | ||
- | >> That hack was used before the [[devel: | ||
- | |||
- | ===== style.css ===== | ||
- | |||
- | <code css style.css> | ||
- | div.dokuwiki div.preview {margin:0 !important; | ||
- | |||
- | /* Styler */ | ||
- | div.styler-box {border: 1px solid #cccccc; padding: 1em; | ||
- | div.styler-box-dblack {border: 1px solid #000000; padding: 1em;} | ||
- | div.styler-box-dyellow {border: 1px solid #ffcc33; padding: 1em;} | ||
- | div.styler-box-dorange {border: 1px solid #ff9933; padding: 1em;} | ||
- | div.styler-box-dgreen {border: 1px solid #33cc33; padding: 1em;} | ||
- | div.styler-box-dblue {border: 1px solid #3366cc; padding: 1em;} | ||
- | div.styler-box-dbrown {border: 1px solid #99cc33; padding: 1em;} | ||
- | div.styler-box-dpink {border: 1px solid #ff66cc; padding: 1em;} | ||
- | div.styler-box-dred {border: 1px solid #ff66cc; padding: 1em;} | ||
- | |||
- | /* sizes */ | ||
- | div.styler-s25 {width:20%} | ||
- | div.styler-s50 {width:45%} | ||
- | div.styler-s75 {width:70%} | ||
- | |||
- | /**/ | ||
- | /*vmc light colors*/ | ||
- | div.styler-background { background-color: | ||
- | div.styler-background-lwhite { background-color: | ||
- | div.styler-background-lyellow { background-color: | ||
- | div.styler-background-lorange { background-color: | ||
- | div.styler-background-lgreen { background-color: | ||
- | div.styler-background-lblue { background-color: | ||
- | div.styler-background-lbrown { background-color: | ||
- | div.styler-background-lpink { background-color: | ||
- | div.styler-background-lred { background-color: | ||
- | |||
- | /*vmc dark colors*/ | ||
- | div.styler-background-d { background-color: | ||
- | div.styler-background-dblack { background-color: | ||
- | div.styler-background-dyellow { background-color: | ||
- | div.styler-background-dorange { background-color: | ||
- | div.styler-background-dgreen { background-color: | ||
- | div.styler-background-dblue { background-color: | ||
- | div.styler-background-dbrown { background-color: | ||
- | div.styler-background-dpink { background-color: | ||
- | div.styler-background-dred { background-color: | ||
- | |||
- | / | ||
- | div.styler-float-right { float: right; margin: 0 1em 0.5em 1em; }*/ | ||
- | div.styler-float-left { float: left; margin: 0 1em 0.5em 0; } | ||
- | div.styler-float-right { float: right; margin: 0 0 0.5em 1em; } | ||
- | |||
- | /*clear*/ | ||
- | div.styler-clear-left { clear: left; } | ||
- | div.styler-clear-right { clear: right; } | ||
- | div.styler-clear-both { clear: both; } | ||
- | |||
- | div.styler-left { text-align: left; } | ||
- | div.styler-right { text-align: right; } | ||
- | div.styler-center { text-align: center; } | ||
- | div.styler-justify { text-align: justify; } | ||
- | |||
- | /* epigraph */ | ||
- | div.epigraph { | ||
- | margin-left: | ||
- | margin-top: | ||
- | margin-bottom: | ||
- | padding-left: | ||
- | font-family: | ||
- | font-style: | ||
- | } | ||
- | |||
- | /* quote */ | ||
- | div.styler-quote { | ||
- | / | ||
- | margin: 1em 0px 1em 3em; | ||
- | border: 1px dotted #CCCCCC; | ||
- | background: | ||
- | padding: 1em; | ||
- | |||
- | } | ||
- | </ |
plugin/styler.1614428405.txt.gz · Last modified: 2021-02-27 13:20 by AnaelMobilia