Mark Highlight System Guide - damiankorcz/Prism-Theme GitHub Wiki

🤔 What is the Mark Highlight System?

Obsidian doesn't have a native highlighting option (mostly due to staying compliant with the markdown standard). As a result, Prism implements this feature utilising the HTML <mark> tags which once encapsulating your text allows it to be styled.

🖍️ Using Mark Highlights

Here is an example showcasing a simple use case for the Mark Highlights, highlighting some text in Red:

<mark class="red">This highlighted text is Red</mark>

Resulting in the following styling:

Red Mark Highlight with the Border and Filled style

You can change the red class for any of the following colours:

  • grey / Grey
  • red / Red
  • orange / Orange
  • yellow / Yellow
  • green / Green
  • mint / Mint
  • cyan / Cyan
  • blue / Blue
  • purple / Purple
  • pink / Pink

In Style Settings under Prism Theme -> Editor -> Mark Highlight -> Light Theme OR Dark Theme, you can customise the Default Style used for the highlights.

Here is how each option looks:

Default Border Filled Border and Filled
Mark Highlight using Default Style Option Mark Highlight using Border Style Option Mark Highlight using Filled Style Option Mark Highlight using Border and Filled Style Option

You will also find an option to disable the text colour. Makes highlights use the default Editor text colour instead.

Here is how it looks when using the Default Text Color Preset option for each Style option again:

Default Border Filled Border and Filled
Mark Highlight using Default Style Option and Default Text Color Preset Mark Highlight using Border Style Option and Default Text Color Preset Mark Highlight using Filled Style Option and Default Color Text Color Preset Mark Highlight using Border and Filled Style Option and Default Text Color Preset

🎨 Overwriting the Default styling

I've implemented overwrite classes which you can add to your Mark Highlights to independently set the style for a specific highlight despite what is set in the Style Option and Text Color Preset in Style Settings. Here's an example:

<mark class="mint mark-filled mark-text-color">This highlighted text is Mint</mark>

Resulting in the following styling:

Mint Mark Highlight with the Filled Style Option and Color Text Color Preset

Available options for changing the Style:

  • mark-default
  • mark-border
  • mark-filled
  • mark-borderandfilled

Available options for changing the Text Color Preset:

  • mark-text-default
  • mark-text-color

💫 Using the UI Accent Colour for a Mark Highlight

You can create a highlight which uses the UI Accent Colour by not specifying the colour class.

If you want to use the UI Accent Colour and the Mark Highlight options set in Style Settings (no overwrites), you can do the following:

<mark class>This highlighted text is using the UI Accent Colour and options set in Style Settings</mark>

Resulting in the following styling (Used Green UI Accent Colour, Border Style Option and Default Text Color Preset in Style Settings):

Mark Highlight using Green UI Accent Colour, Border Style Option and Default Text Color Preset in Style Settings

Here is an example of a Mark Highlight when the UI Accent Colour is set to Red and while using overwrite classes:

<mark class="mark-filled mark-text-default">This highlighted text is Accent</mark>

Resulting in the following styling:

Unspecified Colour Mark Highlight with the Filled Style Option and Default Text Color Preset

📑Mark Highlight Shortcuts using the Text Format Plugin

Courtesy of @ShahriarKh, a guide on how to do this is available here:
https://github.com/damiankorcz/Prism-Theme/wiki/Mark-Highlight-Shortcuts-using-the-Text-Format-Plugin

⚠️ **GitHub.com Fallback** ⚠️