How do I Get Text Colors in GitHub Markdown?

1

Question

I am using the iOS version of Drafts5. I’d like to know if I can use text colors in GitHub Markdown?

Background

On the app, I have selected GitHub Flavored in the Markdown options.

According to GitHub, colors are allowed.

I created a small text file as a test. I will show the code and how I expect it to look in the graphic below.

ColorsTest

When I try viewing my sample code in the Swiss and Foghorn preview engines, the text is black and white. Is there a way to view my GitHub code to see if the colors are rendered properly?

There’s also an online GitHub Markdown editor. You can see the code and result there.

The code I used is rather trivial. But for those who want to copy it, here it is:

# Color Test Document

<style>H1{color:Blue;}</style>
<style>H2{color:DarkOrange;}</style>
<style>p{color:Black;}</style>

## Second Heading

This is a test to see how the colors work.

Thank you for your consideration.

2

Here’s one approach I think will work for you to a point and it is more by way of explanation

<style>
H1{color:Blue !important;}
H2{color:DarkOrange !important;}
p{color:Black !important;}
</style>

# Color Test Document

## Second Heading

This is a test to see how the colors work.

Previewed with Swiss styling

image
image1242×948 216 KB

  • style is an HTML tag and can specify an entire set of styling described a CSS. When doing this it is good practice to define it before you try and use it (ref. your initial use of H1 CSS)
  • by using !important we can force the rendering engine to give it a higher importance than other CSS for the same element classification.
  • the previews use a set of CSS, and the styling variations have been given names such as Foghorn and Swiss. They style the things you were attempting to style and more.
  • the styling example here is simply attempting to override the CSS included in the preview.
  • if you want to preview in a particular style, it is probably, but admittedly not always, a better option to modify the CSS in the preview. It keeps your CSS in one place and gives you more efficient reuse.

Hope that helps.

1 Like
3

That’s nice. I would also consider using classes and spans. (That’s what I tend to do.)

4

Thank you very much for your help. You’ve answered my question perfectly.

Can you, please, elaborate on the quoted portion of your response? I know a bit of HTML, CSS, and, now, Markdown. But I am not an expert. How do I modify the CSS in preview? I have a hunch you are telling me to modify Foghorn or Swiss. I don’t know how or where to access those preview engines.

Does anyone have a good color scheme for coloring H1, H2, H3, and H4. I would like to choose four colors that go well together and that have a high contrast with white background. If no one has a strong suggestion, then I will play around with colors using the Canva color wheel.

Thank you, again.

5

Assuming you are taking an existing preview action as a starting point.

  1. Identify and select the action you are modifying.
  2. Select steps.
  3. Select HTML Preview step.
  4. Change the HTML/CSS to meet your needs.
    5.Select Save and Exit.

It is essentially the same approach as you would have for editing any action. If you were creating an action from scratch, add a new action, add an HTML preview step to it, modify the HTML/CSS in that step, save and exit.

6

@sylumer

Thank you for your response.

After review your answer, I will duplicate and then rename the duplicate Swiss and Foghorn Previews so that I keep the original code in its pristine condition. If I later want different changes, I can always work from the original.