[pmwiki-users] Keyboard keys representation

Petko Yotov 5ko at 5ko.fr
Sat Jan 2 05:56:11 PST 2021


On 02/01/2021 13:03, Robert Riebisch wrote:
> What's the preferred PmWiki way to make keyboard keys stand out from 
> the
> rest of the text?
> I had a quick look at the Cookbook group, but didn't find any 
> promising.
> Currently I just (ab)use italic markup.

My preferred way is to use a wikistyle -- a concept and a wiki markup 
already familiar to the users, and supported in the core.

Add this to pub/css/local.css (adapted from the Wikipedia page you 
linked):

   .key, kbd {
     border: 1px solid #aaa;
     border-radius: 0.2em;
     box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);
     background-color: #f9f9f9;
     background-image: linear-gradient(to bottom, #eee, #f9f9f9, #eee);
     color: #000;
     padding: 0.1em 0.3em;
     font-family: monospace;
     font-size: 0.85em;
     white-space: nowrap;
   }

Then in a wiki page, use %key%C%% like this:

   Type %key%Ctrl%%+%key%C%% to cancel.

Alternatively, if you must have semantic HTML, you can define a 
<kbd></kbd> wiki markup. Something like {@Key@}, for example:

   Markup('kbd', 'inline', '/\\{@(.*?)@\\}/', '<kbd>$1</kbd>');

Petko

> Examples from other Wiki engines:
> 1) MediaWiki: https://en.wikipedia.org/wiki/Control_key
> 2) DokuWiki: https://www.dokuwiki.org/plugin:keyboard



More information about the pmwiki-users mailing list