version=pmwiki-2.3.31 ordered=1 urlencoded=1
author=Petko
charset=UTF-8
csum=See also Cookbook:CodeHighlight. (+34)
name=PmWiki.WikiStyles
post= Save
rev=264
targets=PmWiki.WikiWord,PmWiki.WikiStyleColors,PmWiki.BlockMarkup,PmWiki.Tables,PmWiki.TableDirectives,PmWiki.GroupHeaders,PmWiki.WikiAdministrator,PmWiki.LocalCustomizations,PmWiki.CustomWikiStyles,Cookbook.OutlineLists,PmWiki.LayoutVariables,Cookbook.CodeHighlight,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 %25black bgcolor=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 overflow%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 columns%0a column-gap%0a column-span%0a column-rule%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 %25hlt html%25[@%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 %25pmhlt%25@@[=%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 %25pmhlt%25[@%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 %25pmhlt%25[@%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||%25pmhlt%25[@%25apply=img ...%25@]   ||-           ||all images that ''follow'' until another style applied||%0a||%25pmhlt%25[@%25apply=p ...%25@]     ||%25pmhlt%25[@%25p ...%25@] ||the current paragraph||%0a||%25pmhlt%25[@%25apply=pre ...%25@]   ||-           ||the current preformatted text||%0a||%25pmhlt%25[@%25apply=list ...%25@]  ||%25pmhlt%25[@%25list ...%25@] ||the current list||%0a||%25pmhlt%25[@%25apply=item ...%25@]  ||%25pmhlt%25[@%25item ...%25@] ||the current list item||%0a||%25pmhlt%25[@%25apply=div ...%25@]   ||-           ||the current div||%0a||%25pmhlt%25[@%25apply=block ...%25@] ||%25pmhlt%25[@%25block ...%25@] ||to the current block, whether it's a paragraph, list, list item, heading, or division.||%0a%0aThus, %25pmhlt%25[@%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 %25pmhlt%25[@%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 doesn'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 %25pmhlt%25[@>>WikiStyle%3c%3c@] block can be used to apply a WikiStyle to a large block of items.  %0aThe style is applied until the next %25pmhlt%25[@>>%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 %25pmhlt%25[@(: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 %25pmhlt%25[@%25...%25@] percent signs.%0a%0a[[PmWiki/Tables]], [[PmWiki/table directives]] and [[PmWiki.BlockMarkup#div|%25pmhlt%25[@(: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 %25pmhlt%25[@(: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 %25pmhlt%25[@%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 %25pmhlt%25[@%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 %25pmhlt%25[@%25color=...%25@])%0a* Justification: %25pmhlt%25[@%25center%25@] and [@%25right%25@]%0a* Images and boxes%0a** Floating left or right: %25pmhlt%25[@%25rfloat%25@] and [@%25lfloat%25@]%0a** Framed items: %25pmhlt%25[@%25frame%25@], [@%25rframe%25@], and [@%25lframe%25@]%0a** Thumbnail sizing: %25pmhlt%25[@%25thumb%25@]%0a* Open link in new window: %25pmhlt%25[@%25newwin%25@]  (shortcut for [@%25target=_blank%25@])%0a* Comments: %25pmhlt%25[@%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: %25pmhlt%25[@%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%0a''This section is about highlighting code in various programming languages using an external library. Instead, or in addition, to enable highlighting of the PmWiki's own markup language syntax in the documentation and/or the edit form, see $EnablePmSyntax.''%0a%0aSince version 2.2.119, PmWiki makes it relatively easy to enable syntax highlighting for preformatted text blocks, wrapped in %25pmhlt%25@@[=[@escaped@]=]@@ markup blocks.''%0a%0aTo enable syntax highlighting, add to @@config.php@@:%0a%0a%25hlt php%25 [@%0a  $EnableHighlight = 1;%0a  $HTMLHeaderFmt['Highlight'] = '%0a  %3clink rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/default.min.css" data-theme="light" />%0a  %3clink rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/dark.min.css" data-theme="dark" disabled />%0a  %3cscript src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/highlight.min.js">%3c/script>';%0a@]%0a''This loads the [[https://highlightjs.org/ | Highlight.js library]] from a global CDN, but you can copy these 3 files to your @@pub@@ directory and link to them instead.''%0a%0aSee also Cookbook:CodeHighlight.%0a%0aThen, in a wiki page, you can use the %25pmhlt%25[@%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[@%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@]%0a>>%3c%3c%0a(:markupend:)%0a''If you have the feature correctly enabled you will see the syntax highlighting of the above code.''%0a%0aYou may also want to enable a [@[+]@] Copy code button which will appear near the top right of preformatted blocks.  Add to config.php:%0a%0a->%25hlt php%25 @@ $EnableCopyCode = 1; @@%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->%25hlt php%25[@$WikiStyleCSS[] = 'line-height';@]%0a%0a%0a[[#WikiStyleApply]]%0a!! Defining scope for other HTML elements%0aYou can add additional HTML elements to %25pmhlt%25[@$WikiStyleApply@] to apply WikiStyles to other HTML elements. For example to allow styling on anchor tags:%0a%0a->%25hlt php%25[@$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: %25pmhlt%25[@%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, %25pmhlt%25[@%25color=#aa3333%25@] will work, [@%25color=#AA3333%25@] may not.%0a[[#SeeAlso]]%0a!!See Also%0a* [[List styles]]        {PmWiki/ListStyles$:Summary}%0a* [[PmWiki/Custom WikiStyles]] {PmWiki/CustomWikiStyles$:Summary}%0a* [[Cookbook:WikiStylesPlus | WikiStylesPlus]] {Cookbook.WikiStylesPlus$:Summary}%0a
time=1708803680