How to Highlight text in WordPress

SYNTAX HIGHLIGHTER IN WORDPRESS

HOW TO HIGHLIGHT WORD OR TEXT BACKGROUND IN WORDPRESS POST

syntax highlighter plugin for wordpress

The simple technique to Highlight words or text or any sentence in WordPress websites or blogs is to use the HTML mark tag. By default, the tag highlights any word or text in Yellow florescent background, but with little CSS tricks, you can manage to change the Background Color of the Highlight.


<mark>Yellow</mark>
<mark style="background-color:pink;">Color Pink</mark>
<mark style="background-color:Green;">Color Green</mark>
<mark style="background-color:#F781F3;">Color Value #F781F3</mark>
<mark style="background-color:#F781F3;display: inline-block;  line-height: 0em; padding-bottom: 0.5em;">Display Inline Block</mark>
<h3><highlight>This is my Custom Highlight text</highlight></h3>


Example: Yellow
Example: Pink
Example: Green
Example: Color Value #F781F3
Example: Display Inline Block
Example:

This is my Custom Highlight text


To achieve this custom highlighter effect, you need to copy the following CSS code in your WordPress themes style.css file or add through themes customization menu and add under custom CSS. Feel free to play with the CSS code to change effects or color values.

highlight {
  background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFD0AE 50%);
}

If you do not specify any style for background colour, the default is always Yellow. This sentence is highlighted with HIGHLIGHT tag as available in code example above for inline block.


You can find more references below:

  • HTML Color code Numbers
  • CodersBlock How to Highlight Text inside a textarea
  • Stackoverflow.com Which CSS I need to mark a piece of text as highlighted
  • Low Highlight Heading link
  • Try to do experiments with the colours and other CSS elements to enjoy your creativity.

    TRUSTMEHER WEB SERVICES AND HOSTING

    Also check some other Articles on WordPress Migration to other servers.

    TRUSTMEHER WEB SERVICES AND HOSTING