A Guide to Using HTML and LaTeX Syntax to Add Coloured Text to Your Markdown Documents

If you're a fan of Markdown syntax, you may have noticed that it doesn't offer a built-in way to change the colour of your text. However, fear not! There are a few workarounds you can use to add some 🌈-colour to your text.

One pretty universal option is to use HTML syntax. You can wrap your text in a <span> tag and then set the colour with CSS. For example, if you want your text to be red, you can use the following code:

# Markdown
     <span style="color:red;">your text here > </span>
                      

R Markdown

If you use R Markdown, another option is to use LaTeX syntax. You can use the \textcolor{}{} command to change the colour of your text. Note that this method requires the LaTeX `xcolor` package, which is included in Pandoc's default LaTeX template. Here's an example of how to use this syntax in your markdown file:

# Markdown
    ---
    output: pdf_document
    ---
    Roses are \textcolor{red}{red}, violets are \textcolor{blue}{blue}.
    
                      

In this example, the first set of curly braces contains the desired text colour, and the second set of curly braces contains the text to which this colour should be applied.

It's worth noting that if you want to use these methods in an R Markdown document that will be exported to multiple output formats, you should avoid embedding raw HTML or LaTeX code in your document. This is because these elements will be ignored in output formats that don't support them. Instead, you can use a couple of different methods to handle this issue.

One approach is to create custom CSS or LaTeX files for each output format. You can then reference these files in your R Markdown document using the appropriate YAML header. For example, if you want to use a custom CSS file for HTML output, you can include the following YAML header:

# Markdown
    ---
    title: "My Document"
    output:
      html_document:
      css: custom.css
    ---
                        

Another approach is to use conditional code blocks to include HTML or LaTeX code only in specific output formats. For example, you can use the following code to include HTML code only in HTML output:

# Markdown
    <! - html_preserve →
    <span style="color:red;">your text here > </span>
    <! - /html_preserve →
                      

Similarly, you can use the following code to include LaTeX code only in PDF output:

  # Markdown
    ```{=latex}
    \textcolor{red}{your text here}
    ```
                        

With these methods, you can add some colour to your Markdown documents without worrying about compatibility issues across different output formats.

Obsidian

If you're an Obsidian user, you may be wondering how to add coloured text to your notes. Fortunately, the solution is the same as for Markdown in general. You can use HTML syntax to wrap your text in atag and set the colour with CSS. For example, if you want to make your text red, you can use the following code:

    <span style="color:red;">your text here in red</span>, 
    <span style="color:#520099;">or make it blue</span>
                        

Simply add this code to your Obsidian note and you'll have coloured text in no time. It's a simple and effective way to add some visual interest to your notes and make certain information stand out.

Hex colour code

It's worth noting that in addition to using colour names like "red" or "blue," you can also use hex codes to specify colours in HTML and Obsidian. This gives you even more options for customising the colour of your text.

      <span style="color: #FF69B4;">Why did the tomato turn red?</span>
      <span style="color: #00FFFF;">Because it saw the salad dressing!</span>
                        

In this example, we've used the hex codes #FF69B4 for pink and #00FFFF for turquoise to make the joke stand out. Of course, you can use any hex code you like.

Summary

In summary, Markdown syntax doesn't provide a built-in way to change the colour of your text. However, you can use HTML or LaTeX syntax to achieve this. HTML syntax involves wrapping the text in a <span> tag and setting the colour with CSS, while LaTeX syntax requires the use of the \textcolor{}{} command. With these tips, you can add some colourful flair to your Markdown documents and ensure they look great across all output formats.

👉👈 Follow me for more: Medium | Twitter | GitHub