• View
• Edit
• History
• Print
• Backlinks

WikiStyles-Talk

This is a talk page for improving WikiStyles.

WikiStyles Syntax Highlight shows the second CSS element as "disabled"

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/dark.min.css" data-theme="dark" disabled />

This is confusing. Does that mean it does not work for dark theme? --gnuzoo April 30, 2024, at 07:27 PM

If your skin allows for changing the color theme, this is intended. If you only use one color theme, insert only one <link...> and exclude both data-theme="..." and disabled --Petko May 01, 2024, at 04:25 PM

Block on the same line?

Is there a way or Markup() function call to allow the block markup closing ">><<" to be on the same line as the opening? --gnuzoo April 16, 2024, at 02:37 PM

Not for directives like ">><<" or (:divend:), they are expected to be at the start of a line. On a single line you can style the paragraph block with %apply=p styles...% or just %p styles...%, with most of the WikiStyles. --Petko April 16, 2024, at 02:54 PM

%p rfloat width=40pct border="2px dotted magenta" margin-left=.5em% Floating block with some text here.

%p green margin-top=0% This paragraph is green.

%p red% This paragraph is red.

%p frame center% This is centered in a frame

I don't get it. The html element div can be on the same line. "<div>Hello World</div>"
Why not (:div:) and (:divend:) ? --gnuzoo
----------------------------------------------------
Petko wrote: Not for directives like ">><<" or (:divend:)

This markup does it:

switch ($action) {
        case "edit"   :
                if (! @$_POST['preview']) break ;
        case "browse" :
        case "print"  :
                Markup('CloseBlockOnSameLine1', '_begin', '/(\\(:div:\\))(.*?)(\\(:divend:\\))$/i', "$1$2\n$3") ;
                Markup('CloseBlockOnSameLine2', '_begin', '/^(>>.+?<<)(.*?)(>><<)$/', "$1$2\n$3") ;
}

--gnuzoo April 20, 2024, at 01:36 AM

Thinking out of the box, I like it. --Petko

%apply=item center% centers the whole list

* %apply=item text-align=center%  one
* two
* three

Am I right expecting this code to center only the first element of the list?
Finar June 24, 2021, at 10:01 AM

%center% is something specific like %rframe%, but you can use %item text-align=center% --Petko June 24, 2021, at 11:01 AM

Problem adding cyrillic attributes

I added this to config.php:

 SDVA($WikiStyleAttr,array( 'data-target' => 'a',));

now code like this works:
%apply=a data-target='modal start'% ...
but the same code does not:
%apply=a data-target='русский не хочет'% ...

Finar July 24, 2019, at 03:33 PM

It may be possible, but entirely unsupported, to set in config.php $WikiStylePattern = '%%|%[A-Za-z][-,=:#\\w\\s\'"().\\x80-\\xfe]*%';. --Petko July 24, 2019, at 07:26 PM

How add new attribute to <span>?

I want to add support for code like this:
%title='to read more about this'% hover mouse over here %%
the result HTML should be:

 <span title='to read more about this'> hover mouse over here</span>

Is it possible?

Finar July 24, 2019, at 03:33 PM

  Markup('inlinetitle', '<inline', '/\\{``(.*?)``(.*?)``\\}/', 'mu_title');
  function mu_title($m) {
    return Keep('<abbr title="'.PHSC($m[1]).'">').$m[2].'</abbr>'; # or <span...</span>
  }

Adding classes to links

I added this to config.php:
$WikiStyleApply['link'] = 'a';

then my wikicode is:
%apply=link btn%[[my link]]

and I expect to get html code like this:
<a class='wikilink btn' ...>

but actually I get:
<a class='wikilink' class='btn' ...>
Class attribute is doubled.

I'm not shure if it is problem or not, because of it is working nice in modern browsers, but FireFox marks this source code as red, meaning it is not correct.

What do you think?
Finar July 27, 2018, at 08:44 AM

Indeed, this is not perfect, but you could do it differently, just use %btn%[[link]]%% and in the CSS instead of styling a.btn{...} you style span.btn a.wikilink{...} to have the same result. (No $WikiStyleApply.) See PmWiki Philosophy "2. Don't try to replace HTML". --Petko July 27, 2018, at 09:05 AM

You can set to config.php $LinkPageExistsFmt = "<a href='\$LinkUrl' title='\$LinkAlt'>\$LinkText</a>"; that will remove the default class='wikilink' from all internal links. --Petko July 31, 2018, at 08:15 AM

Is the any way to add new html attribute to <ol>?

I want to apply attribute 'reversed', is it possible in any way?
I want to get result html like this:

 <ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

Finar July 04, 2018, at 04:56 PM

  $WikiStyle['reversed']['reversed'] = 'reversed';
  $WikiStyle['reversed']['apply'] = 'list';
  $WikiStyleAttr['reversed'] = 'ol';

# %reversed% Coffee
# Tea
# Milk

Greate, thanks! Finar

"Styling anchor elements affects all elements on the same line (refer to Styling Anchor Elements)."

The above is not correct for the core. Test: no style: regular links?, green link, red: red link, white: white link on black background, again no style: regular links?. Removed from the documentation. --Petko March 31, 2016, at 03:22 AM

The following may be better moved to a Cookbook:

Styling Tables

Or, to apply an ID attribute to a table row TR, place in config.php:

$WikiStyleApply['row'] = 'tr';

Then, in an advanced table, you can have:

(:cellnr:) %apply=row id=myid bgcolor=pink% cell content

And also in a simple table:

|| border=1
|| %apply=row id=myrowid% 1 || 2 || 3 || 4 ||

Note, the %apply=row...% WikiStyle should be on the same line as (:cellnr:). Also note, you must have a space trailing the (:cellnr:).

An issue with a cookbook recipe that doesn't appear in the core may better be listed on the cookbook page:

Styling Anchor Tags

To apply styling to anchor tags, place in config.php:

$WikiStyleApply['link'] = 'a';

Then, you can apply a class or style to an anchor link:

%apply=link red%[[PmWiki.WikiStyles | test link]]

NOTE: Examples below don't display correctly, as $WikiStyleApply is not active on this page.

Be aware that multiple links on the same line with different styles will inherit the style of the last link.

%apply=link red%[[PmWiki.WikiStyles | red link]]%% and then a %apply=link blue%[[PmWiki.WikiStyles | blue link]]%% -- but both links show as blue.

In order to apply different styling to multiple elements on the same line you need to split the line with a single line-break.

%apply=link red%[[PmWiki.WikiStyles | red link]]%% separated with a newline
and then a %apply=link blue%[[PmWiki.WikiStyles | blue link]]%% -- now shows links correctly styled.

If you're using $HTMLPNewline = '<br />', and you don't the output to be visually broken, disable newline breaks with (:nolinebreaks:):

(:nolinebreaks:)
%apply=link red%[[PmWiki.WikiStyles | red link]]%% separated with a newline
and then a %apply=link blue%[[PmWiki.WikiStyles | blue link]]%% -- now shows links correctly styled.
(:linebreaks:)

With the core, simply use %red% and %blue% and styling it will work. --Petko March 31, 2016, at 03:33 AM

%lframe blue bgcolor=yellow text-shadow:"2px 2px #ff0000"% framed blue text with yellow background and text shadow

%mystyle% framed blue text with yellow background and text shadow

(:div class="frame green" style="font-size:smaller":)
This text should be small, green, and surrounded by a frame
(:divend:)

(:div class="frame" style="font-size:smaller; color: green;":)
This text should be small, green, and surrounded by a frame
(:divend:)

(:div class="blue rframe" style="font-size:smaller":)
This text should be small, blue, and surrounded by a right floated frame
(:divend:)

(:div class="blue rfloat frame" style="font-size:smaller":)
This text should be small, blue, and surrounded by a right floated frame
(:divend:)

%define=bclass bgcolor=#ddddff border="1px dotted green"%

(:table:)
(:cellnr bclass:) test one
(:cellnr class="bclass":) test two
(:cellnr:)%bclass% test three
(:cellnr:)
>>bclass<<
test four
>><<
(:cellnr:)
(:div class="bclass":)
test five
(:divend:)
(:tableend:)

%define=zclass block bgcolor=#ddddff border="1px dotted green"%

(:table:)
(:cellnr zclass:) test one
(:cellnr class="zclass":) test two
(:cellnr:)%zclass% test three
(:cellnr:)
>>zclass<<
test four
>><<
(:cellnr:)
(:div class="zclass":)
test five
(:divend:)
(:tableend:)

(:div class='lfloat' font-size='smaller' color='blue' bgcolor='#eee' clear='left' :)
{*$Name}
(:divend:)

(:div style="font-size:'smaller'; color:'blue'; background-color:'#eee'; float:left; clear:'left';" :)
{*$Name}
(:divend:)

(:div class='frame lfloat':)
{*$Name}
(:divend:)

(:div style="font-size:smaller; color:blue; background-color:#eee; float:left; clear:left;" :)
{*$Name}
(:divend:)

%define=mytrail div font-size='smaller' background-color='#eee' float='right' clear='right' %
(:div:)
%mytrail%{*$Name}
(:divend:)

(:div mytrail:)
{*$Name}
(:divend:)

(:div style="font-size: smaller ; color: blue ; background-color: #eeeeee ; " :)
{*$Name}
(:divend:)

%bgcolor=green% green
%bgcolor=#faf0b4% #faf0b4
%bgcolor:brown% brown
%bgcolor:#b4e6b4% #b4e6b4
%background-color=pink% pink
%background-color:yellow% yellow
%style='background-color:blue;'% blue

%background=green% green
%background=#ffbebe% #ffbebe
%background:brown% brown
%background:#b4e6b4% #b4e6b4

(:table:)
(:cellnr style="background:#faf0b4;" :) Role 
(:cell style="background:#ffbebe;" :) Moment, Interval 
(:cell style="background:#b4c8d2;" :) Description  
(:cell style="background:#b4e6b4;" :) Party, place, thing 
(:tableend:)

%define=bg block bgcolor=#ddddff%
||!example ||!%bg%table ||
||%bg%coloured ? ||not coloured ? ||

%define=bgC display=block bgcolor=#ddddff%
||border=1
||!example ||!%bgC%table%% ||
||%bgC%coloured ? %%||not coloured ? ||