[pmwiki-users] PmSyntax

[Petko Yotov]

On 04/11/2022 20:54, Hans wrote:
>>    #chk_hlt, #chk_hlt * {
>>      color: blue;
>>    }
> 
> This will make link text and square bracket blue. How can I show the
> square brackets in red, and the link in blue? Basically showing
> colours when the Highlight is not on, and changing that when toggling
> to on.
...
>> You can even override the bracket and text colour of the label, 
>> depending on whether the highlighting is enabled or not - it adds or 
>> removes a .pmhlt class name to the label.
> I don't see how to target the brackets and label text separately.


You can override the default colours and styles with custom CSS. For 
example:

   /* Remove colors from label when syntax is enabled */
   #chk_hlt.pmhlt * {
     color: black;
     font-weight: normal;
   }

   /* Add "Off" to label when syntax is enabled */
   #chk_hlt.pmhlt .pmurl::after {
      content: " Off";
   }

   /* Blue label when syntax not enabled */
   #chk_hlt:not(.pmhlt) .pmurl {
     color: blue;
     /* or color: var(--pmsyntax-url); from 2.3.15 */
   }

   /* Dark red brackets when syntax not enabled */
   #chk_hlt:not(.pmhlt) .pmpunct {
     color: #a00;
     /* or color: var(--pmsyntax-punct); from 2.3.15 */
   }


> The font seems to change as well when toggling Highlight on.

This was an omission, thanks for noticing! It didn't show on my screen, 
but now fixed in the pre-release for 2.3.15.

To fix it before you upgrade to the pre-release or to 2.3.15, add to 
local.css something like:

  #chk_hlt {
   font-size: .93333em;
   font-family: monospace;
  }


The label used the configured monospaced font for the wiki, for example 
"Courier New" or "Andale Mono", which may be different from the basic 
"monospace" font on the browser enabled by PmSyntax.

I am not certain if we can have a reliable cross-platform-available 
monospaced font for PmSyntax -- suggestions welcome. It needs to be well 
tested to make sure it behaves consistently and does not misalign the 
texts, for example when the edit area is resized by a random amount.

Petko