version=pmwiki-2.2.125 ordered=1 urlencoded=1 author=Petko charset=UTF-8 csum=highlight 9.18.1 (+0) name=PmWiki.WikiStyles post= Save rev=233 targets=PmWiki.WikiWord,PmWiki.WikiStyleColors,PmWiki.BlockMarkup,PmWiki.Tables,PmWiki.TableDirectives,PmWiki.GroupHeaders,PmWiki.WikiAdministrator,PmWiki.LocalCustomizations,PmWiki.CustomWikiStyles,Cookbook.OutlineLists,PmWiki.BasicEditing,PmWiki.LayoutVariables,PmWiki.WikiStyleExamples,PmWiki.TextFormattingRules,PmWiki.ListStyles,Cookbook.WikiStylesPlus text=(:Summary: Modifying the style of page contents:)%0a(:Audience: authors (basic, advanced) :)%0a%0aWikiStyles allow authors to modify the color and other styling attributes of the contents of a page. %0aA WikiStyle is written using percent-signs, as in %25red%25[@%25red%25@]%25%25 or %25bgcolor=lightblue%25[@%25bgcolor=lightblue%25@]%25%25.%0a%0a[[#Attributes]]%0a!! WikiStyle attributes%0a%0aThe style attributes recognized within a WikiStyle specification are:%0a(:table:)%0a(:cellnr colspan=2:)%25center%25------------ CSS -------------%25%25%0a(:cell:)%25center%25--HTML--%25%25%0a(:cellnr:)%0a bgcolor%0a background-color%0a border'^[[#al|1]]^'%0a color%0a display%0a float%0a clear%0a font-size%0a font-family%0a font-weight%0a font-style%0a(:cell:)%0a height[[#fn|*]]%0a list-style%0a margin'^[[#al|1]]^'%0a padding'^[[#al|1]]^'%0a text-align%0a text-decoration%0a white-space%0a width[[#fn|*]] %0a(:cell:)%0a accesskey %0a align%0a class%0a hspace %0a id %0a target %0a rel %0a vspace %0a value%0a reversed%0a(:cellnr rowspan=3:)%0a Special: define, apply%0a(:tableend:)%0a%0aThe attributes in the first two columns correspond to the ''[[cascading style sheet -> http://blooberry.com/indexdot/css/propindex/all.htm]]'' (CSS) properties of the same name. The attributes in the last column apply only to specific items:%0a%0a* '''[@class=@]''' and '''[@id=@]''' assign a CSS class or identifier to an HTML element%0a* '''[@target=name@]''' opens links that follow in a browser window called "name"%0a* '''[@rel=name@]''' in a link identifies the relationship of a target page%0a* '''[@accesskey=x@]''' uses 'x' as a shortcut key for the link that follows%0a* '''[@value=9@]''' sets the number of the current ordered list item%0a%0a** [[#fn]] The width and height attributes have asterisks because they are handled specially for %3cimg .../> tags. If used by themselves (i.e., without anything providing an "apply=" parameter to the WikiStyle), then they set the 'width=' and 'height=' attributes of any %3cimg ... /> tags that follow. Otherwise, they set the 'width:' and 'height:' properties of the element being styled.%0a## [[#al]] margin, padding, and border can be suffixed by -left, -right, -top, and -bottom%0a%0a!! WikiStyles versus CSS styles%0aWikiStyles, as written in the wiki page, are not exactly CSS styles or CSS classes. WikiStyles allow authors to use both pre-defined by the administrator CSS classes, and to define new combinations of styles, without any need to edit/update local CSS files on the server.%0a%0aNote that PmWiki allows advanced authors to use of @@ class= @@ and @@ style= @@ in tables and division blocks, but these are raw HTML attributes, and not WikiStyles; knowledge of CSS is required to use them.%0a%0a!! Text color and font%0aThe most basic use of WikiStyles is to change text attributes such as color, background color, and font. %0aPmWiki defines several WikiStyles for changing the text color to [=%25black%25, %25white%25, %25red%25, %25yellow%25, %25blue%25, %25gray%25 (%25grey%25), %25silver%25, %25maroon%25, %25green%25, %25navy%25, %25fuchsia%25, %25olive%25, %25lime%25, %25teal%25, %25aqua%25, %25orange%25 and %25purple%25=].%0a%0a(:markup class=horiz:)%0aThe basket contains %25red%25 apples, %25blue%25 blueberries, %25purple%25 eggplant, %25green%25 limes, %25%25 and more.%0a(:markupend:)%0a%0aFor colors other than the predefined colors, use the [@%25color=...%25@] WikiStyle. (Note: RGB colors (#rrggbb) should always be specified with lowercase letters to avoid [[WikiWord]] conflicts.)%0a%0a(:markup class=horiz:)%0aI'd like to have some %25color=#ff7f00%25 tangerines%25%25, too!%0a(:markupend:)%0a%0aTo change the background color, use [@%25bgcolor=...%25@] as a WikiStyle:%0a%0a(:markup class=horiz:)%0aThis sentence contains %25bgcolor=green yellow%25 yellow text on a green background.%0a(:markupend:)%0a%0aSee [[(PmWiki:)WikiStyle Colors]] for more color help.%0a%0a!! Text justification%0aWikiStyles are used to control the text justification%0a%0a(:markup class=horiz:)%0a%25center%25 This text is centered. %0a%0a%25right%25 Right justified.%0a(:markupend:)%0a%0aand to create floating text:%0a%0a(:markup class=horiz:)%0a%25rfloat%25 This text floats to the right%0a%0a%25rframe%25 floats to the right with a frame%0a%0aLorem ipsum dolor sit amet, consectetuer sadipscing elitr%0a(:markupend:)%0a%0a%0a[[#Scope]]%0a!! Scope%0a%0aWikiStyles can also specify a ''scope''; with no scope, the style is applied to any text that follows up to the next WikiStyle specification or the end of the paragraph, whichever comes first. The '''apply=''' attribute and its shortcuts allow to change the scope as follows:%0a%0a||class='tabtable' cellpadding=3 cellspacing=0 style="border:1px dotted blue;" rules=rows %0a||!apply attribute ||!shortcut ||!style applies to... ||%0a||[@%25apply=img ...%25@] ||- ||all images that ''follow'' until another style applied||%0a||[@%25apply=p ...%25@] ||[@%25p ...%25@] ||the current paragraph||%0a||[@%25apply=pre ...%25@] ||- ||the current preformatted text||%0a||[@%25apply=list ...%25@] ||[@%25list ...%25@] ||the current list||%0a||[@%25apply=item ...%25@] ||[@%25item ...%25@] ||the current list item||%0a||[@%25apply=div ...%25@] ||- ||the current div||%0a||[@%25apply=block ...%25@] ||[@%25block ...%25@] ||to the current block, whether it's a paragraph, list, list item, heading, or division.||%0a%0aThus, '''[@%25p color=blue%25@]''' is the same as '''[@%25apply=p color=blue%25@]''', and '''[@%25list ROMAN%25@]''' is the same as '''[@%25apply=list list-style=upper-roman%25@]'''.%0a%0aSome [[#predefined|predefined style shortcuts]] also make use of apply, thus '''[@%25right%25@]''' is a shortcut for '''[@%25text-align=right apply=block%25@]'''.%0a%0aExample: Apply a style to a paragraph:%0a(:markup:)%0a%25p bgcolor=#ffeeee%25 The WikiStyle specification at the beginning of this line applies to the entire paragraph, even if there are %25blue%25 other WikiStyle specifications %25%25 in the middle of the paragraph.%0a(:markupend:)%0a%0a%0a'''Caveat''': An applied WikiStyle will only take effect if it's on the%0aline that starts the thing it's supposed to modify. In other%0awords, a WikiStyle in the third markup line of a paragraph%0acan't change the attributes of the paragraph:%0a%0a(:markup class=horiz:) %0aafter the first line of the paragraph,%0awe try to %25apply=p color=blue%25 change color.%0aThis does't work because the style comes after the first line of the paragraph.%0a(:markupend:)%0a%0a(:markup class=horiz:)%0aHowever, this %25apply=p color=red%25 paragraph%0a''will'' be in red because its block style does%0aoccur in the first line of its text.%0a(:markupend:)%0a%0a(:markup class=horiz:) %0a* Here's a list item%0a* %25list red%25 Oops, too late to affect the list!%0a(:markupend:)%0a%0aIf you want to break a list in two, you need to have a line not part of the list between, that is a line that has any content other than space and newlines, otherwise PmWiki considers the vertical space part of the previous list item. You can have an non-breaking space, or the escaped null character:%0a%0a(:markup class=horiz:)%0a* %25list red%25 first item%0a* second item%0a %0a* %25apply=list bgcolor=lightgreen%25 second list - first item%0a* second list - second item%0a[==]%0a* %25list class=mambo%25 third list - first item%0a* third list - second item%0a(:markupend:)%0a%0a%0a[[#blocks]]%0a!! Larger blocks%0a%0aThe '''[@>>WikiStyle%3c%3c@]''' block can be used to apply a WikiStyle to a large block of items. %0aThe style is applied until the next [@>>%3c%3c@] is encountered.%0a%0a(:markup class=horiz:)%0a>>blue font-style:italic bgcolor=#ffffcc%3c%3c%0aEverything after the above line is styled with blue italic text,%0a%0aThis includes%0a preformatted %25red%25text%25%25%0a* lists%0a-> indented items%0a>>%3c%3c%0a(:markupend:)%0a%0aNote, the '''[@(:div style="..." class="...":)@]''' directive does not work the same way as [@>>WikiStyle%3c%3c@], it can only contain the regular HTML style and class attributes.%0a%0a%0a[[#styleclass]]%0a!! HTML "class" and "style" attributes for tables and divisions%0aWikiStyles are only the commands between [@%25...%25@] percent signs.%0a%0a[[PmWiki/Tables]], [[PmWiki/table directives]] and [[PmWiki.BlockMarkup#div|[=(:div:)=]]] division blocks allow advanced authors to incorporate the HTML/CSS attributes @@ class= @@ and @@ style=@@. %25red%25 Note that these attributes are not WikiStyles%25%25, knowledge of CSS is required to use them.%0a%0a(:markup class=horiz:)%0a(:table style="font-style:italic; color:green; border:1px solid blue; background-color:#ffffcc":)%0a(:cellnr:)%0aEverything after the above line is styled with green italic text,%0a%0aThis includes%0a preformatted text%0a* lists%0a-> indented items%0a(:tableend:)%0a(:markupend:)%0a%0aNote, the '''[@(:div style="..." class="...":)@]''' directive does not work the same way as [@>>style%3c%3c@], as mentioned above, it can only contain the HTML style and class attributes.%0a%0a[[#Shortcuts]]%0a!! Custom style shortcuts%0a%0aThe '''[@define=@]''' attribute can be used to assign a shorthand name to any WikiStyle specification.%0aThis shorthand name can then be reused in later WikiStyle specifications.%0a%0a(:markup class=horiz:)%0a%25define=box block bgcolor=#ddddff border="2px dotted blue"%25%0a%0a%25box%25 [@some sort of text@]%0a%0a%25box font-weight=bold color=green%25 [@some sort of text@]%0a(:markupend:)%0a%0a-%3c '''Tip:''' It's often a good idea to put common style definitions into [[Group Header(s)]] pages so that they can be shared among multiple pages in a group. Or, the [[wiki administrator]] can predefine styles site-wide as a [[local customization(s)]] (see [[Custom WikiStyles]]).%0a%0a-%3c '''Tip:''' Use custom style definitions to associate meanings with text instead of just colors. For example, if warnings are to be displayed as green text, set [@%25define=warn green%25@] and then use [@%25warn%25@] instead of [@%25green%25@] in the document. Then, if you later decide that warnings should be styled differently, it's much easier to change the (one) definition than many occurrences of [@%25green%25@] in the text.%0a%0a-%3c '''Tip:''' Any undefined WikiStyle is automatically treated as a request for a class, thus [@%25pre%25@] is the same as saying [@%25class=pre%25@].%0a%0a!![[#predefined]] Predefined style shortcuts%0a%0aPmWiki defines a number of style shortcuts.%0a%0a* Text colors: %25black%25black%25%25, %25white bgcolor=black%25white%25%25, %25red%25red%25%25, %25yellow%25yellow%25%25, %25blue%25blue%25%25, %25gray%25gray (grey)%25%25, %25silver%25silver%25%25, %25maroon%25maroon%25%25, %25green%25green%25%25, %25navy%25navy%25%25, %25purple%25purple%25%25, %25fuchsia%25fuchsia%25%25, %25olive%25olive%25%25, %25lime%25lime%25%25, %25teal%25teal%25%25, %25aqua%25aqua%25%25, %25orange%25orange%25%25 (shortcut for [@%25color=...%25@])%0a* Justification: [@%25center%25@] and [@%25right%25@]%0a* Images and boxes%0a** Floating left or right: [@%25rfloat%25@] and [@%25lfloat%25@]%0a** Framed items: [@%25frame%25@], [@%25rframe%25@], and [@%25lframe%25@]%0a** Thumbnail sizing: [@%25thumb%25@]%0a* Open link in new window: [@%25newwin%25@] (shortcut for [@%25target=_blank%25@])%0a* Comments: [@%25comment%25@] (shortcut for [@%25display=none%25@]). %25red%25 This is not meant to hide secrets,%25%25 as the hidden content is still printed into the HTML source of the page -- readable to bots (and may appear in web searches) or via "View: Source" and "View: Page Style: None" in the browser.%0a* Ordered lists: [@%25decimal%25@], [@%25roman%25@], [@%25ROMAN%25@], [@%25alpha%25@], [@%25ALPHA%25@], [@%25reversed%25@] (see also Cookbook:OutlineLists)%0a%0a!! Enabling the "Syntax Highlight" code beautifier library %25block id=highlight%25%0a%0aSince version 2.2.119, PmWiki makes it relatively easy to enable syntax highlighting for preformatted text blocks. Note, a block is considered a "code block" for highlighting if it is rendered as a preformatted element. see [[BasicEditing#preformatted]] for 3 ways to do this.%0a%0aTo enable syntax highlighting, add to config.php:%0a%0a(:hlt_cdn_prefix:[=https:=]//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build:)%0a>>hlt php%3c%3c%0a $EnableHighlight = 1;%0a $HTMLHeaderFmt['Highlight'] = '%0a %3clink rel="stylesheet" href="{$:hlt_cdn_prefix}/styles/default.min.css" />%0a %3cscript src="{$:hlt_cdn_prefix}/highlight.min.js">%3c/script>';%0a>>%3c%3c%0a''This loads the [[https://highlightjs.org/ | Highlight.js library]] from a global CDN, but you can copy these 2 files to your @@pub@@ directory and link to them instead.''%0a%0aThen, in a wiki page, you can use the [@%25highlight%25@] or [@%25hlt%25@] wikistyles, and the language to mark your code blocks.%0a%0aEither immediately before the code block:%0a(:markup:)%0a%25hlt php%25[@%0a function SDVA(&$var,$val)%0a { foreach($val as $k=>$v) if (!isset($var[$k])) $var[$k]=$v; }%0a function IsEnabled(&$var,$f=0)%0a { return (isset($var)) ? $var : $f; }%0a@]%0a(:markupend:)%0a%0aOr in a wrapping division block:%0a(:markup:)%0a>>highlight css%3c%3c%0a /* These adjust the size and spacing of heading elements */%0a h1, h2, h3, h4, h5, h6 { margin:1.0em 0 .6em 0; }%0a h1, h2, h3, h6 { font-weight:normal; }%0a h4, h5 { font-weight:bold; }%0a>>%3c%3c%0a(:markupend:)%0a''If you have the feature correctly enabled you will see the syntax highlighting of the above code.''%0a%0a[[#Styles]]%0a!! Enabling Styles%0aStyles not listed above can be enabled by a PmWiki Administrator by modifying the local/config.php file. %0aFor instance to enable the "line-height" style attribute add the following line to the local/config.php file:%0a%0a->[@$WikiStyleCSS[] = 'line-height';@]%0a%0a%0a[[#WikiStyleApply]]%0a!! Defining scope for other HTML elements%0aYou can add additional HTML elements to [@$WikiStyleApply@] to apply WikiStyles to other HTML elements. For example to allow styling on anchor tags:%0a%0a $WikiStyleApply['link'] = 'a';%0a%0a%0a[[#Examples]]%0a!! Examples%0a%0a[[WikiStyle Examples]] contains a number of examples of ways to use WikiStyles in pages.%0a%0a[[#KnownIssues]]%0a!! Known Issues%0a* Percents in style definitions (like: [@%25block width=50%25 %25@]) require the use of "pct" instead of "%25". PmWiki will convert the "pct" into "%25" so that it becomes valid CSS.%0a* If you specify multiple values for an attribute, like @@border="2px solid blue"@@ make sure you place the values in quotes.%0a* Be sure to use lowercase letters for red-green-blue hex colors, [@%25color=#aa3333%25@] will work, [@%25color=#AA3333%25@] may not.%0a[[#SeeAlso]]%0a!!See Also%0a* [[PmWiki/Custom WikiStyles]] {PmWiki/CustomWikiStyles$:Summary}%0a* [[PmWiki:List Styles]] {PmWiki/ListStyles$:Summary}%0a* [[Cookbook:WikiStylesPlus | WikiStylesPlus]] {Cookbook.WikiStylesPlus$:Summary} time=1580583034