📜highlight styles for <code> tag is missing in slides (highlighting keywords in text)

[yilmazdurmaz]

Describe the issue

This happens in slides for English and Turkish at least.

I could not yet check them all, but they should be sharing a single style in the template, so I expect this in all slides.

The following from "build-tools/heroku/tailwind/styles.css", for example, could solve the problem if added in the template.

code {
  @apply font-mono inline rounded py-1 px-2 font-normal;
  background: #272822 !important;
  color: #ff6188;
  font-size: 90%;
}

For the moment, I am adding a visual indicator to my translations. that is, I am quoting keywords like this "{print}". Ugly in the source but looks good on the page. Also, it will still be looking nice if you fix the highlighting.

Below, I added screenshots of current and expected looks of keywords in slides.

Add a screenshot (optional)

Expected text

Temporary solution

[boryanagoncharenko]

@AnneliesVlaar @MarleenGilsing I am posting a summary for you. On the hedy website, if a keyword (or a code fragment) is used in a text, it is styled in a nice way to illustrate it is code. This happens in the level text of the code page, in the error messages displayed by the code editor, and in the custom adventure editor we have the <> button to style the code-in-text accordingly. This is how the styling looks like:

So, this works everywhere but not in the slides. In slides, keywords/code fragments use a different font but not the nice pink-on-black styling. This issue requests the style of the keywords/code fragments in slides to be the same as the rest of Hedy.

Please bear in mind that slides probably never styled keywords properly, or at least they did not in the past year. So, this could be considered as more of a feature request than a bug.