How to give two different colors for the two syntax for italics in markdown

.tc-dropzone em { color: blue; }

.tc-dropzone strong { color: red; }

From this post I have learned how to change the color for bold and italics words.

In markdown , there are two different syntax for italics - *italics* and _ italics_
Is there any way to give two different colors for these two syntax for italics ?

You may want it more focused but for just em and em strong this works.

image

Probably not. Markdown parsers tend to generate an intermediate representation (an abstract syntax tree), which will likely strip out such differences, so there would be no way to distinguish them in the later step of generating HTML output.

I’d love to be proven wrong, though.

I was also not having much hope for a solution for this.
Purpose for this request is - I am using markdown syntax for italics - astericks * * as the delimiter for clozes in my spaced repetition system. I have added red color for italics words using the CSS mentioned in the OP. By using CSS, I am hiding the italicized words so that it appear like a cloze.

Since I am using * * for cloze, I thought I will use _ _ for italics and to differentiate italics from cloze in the viewtemplate it would be better to give a different color for both.

I don’t know if it would work for Markdown, but it’s not that difficult to extend the wikitext parser, as summarized in https://talk.tiddlywiki.org/t/pretty-fractions/8801. That would let you find another markup for cloze or for em.

I am digging into the markdown plugin to see if I can find an answer.

  • I placed _Underscore_ then *asterix* versions in a markdown tiddler and used the browser inspect and we can see both are rendered using the same html <em> tag as above.
  • This means both are parsed into the same output, so we need to find the parser and find a way to differentiate. Perhaps adding a class to the em tag for one or both forms of italics.

I am a little confused why this happens, looking at the common mark reference the use of underscore for italics and bold is troubling.

I would be tempted to keep *emphasised* as <em> and parse underscoreasunderscore but then markdown suggests you use ++inserted text++ for underline or the <ins> tag.

So I don’t know the best approach, what do you thing @arunnbabu81 and @Scott_Sauyet ?

I guess using this might be a better option, I went with * * because I hardly use italics in my text and I use _ sometimes in my tiddler titles.

Let me try out inserted text option

You could also use

<u>Underline</u> <i>Italics</i> Underline Italics

Or even create your own and build the css <cloze><cloze>

1 Like

I want to stick with commonly used syntax so that if i want to do markdown to wikitext conversion in future, it should not become a problem

1 Like

Then you will definitely have to change the Markdown parser. I know Tony said he was looking at it; I don’t know if he’s made progress.

I have, inside the markdown plugin there are opportunities to leverage parsers that come with wikitext, there is information about extending the parser and the possibility of modifying the “Typographical Replacements”.

I think @arunnbabu81 may be “spoilt for choice” on how to implement this. Not to mention building an Editor toolbar button to facilitate the use of any tag or symbol used to indicate the desired exceptions.

Any suggestion about the simplest choice? What in the parser would our OP need to alter, if all that’s desired is to output <em>italic</em> <em class="cloze">text</em> when parsing *italic* _text_? Obviously editor buttons and such could be layered on that, but how would you go about this first step?

The markdown parser seems to be in ugly javascript so I am not sure how to modify the parser, however it can be configured to pass through to the tiddlywiki parser.

  • As a result it may be easier to invent a new form of emphasis as a tiddlywiki parser and have it added to $:/config/markdown/renderWikiTextPragma
  • I will continue to investigate

In the markdown to wikitext convertor plug in created by @linonetwo, there is no support for inserted text (++ ++)
So I don’t think I will shift to using inserted text syntax.

Is there any downside of using italics syntax (* *) for creating clozes since I don’t use italics much in my text

Not only is there no downside, if you do separate your rare plain italics (say _italic_) from your custom one (*cloze*), you can always come back later at this problem knowing that the information you want to present is preserved.

And I have thought of a possible approach that doesn’t involve altering the Markdown parser. You can run a simple conversion before Markdown runs, turning _italic_ *cloze* into _italic_ <em class=cloze>cloze</em> or to a custom HTML tag. Then when Markdown runs, it will convert the remaining italics blocks for you.

Of course I didn’t know how to do this either, but it seems likely to be simpler and more robust than meddling with the parser. It might be worth pursuing.

1 Like

I wrote a plugin to extend tiddler types so that parses can be configured and piped. This allows a ‘regex parser’ to change the tiddlers text before markdown/tiddlytext is run.

https://flexibility.tiddlyspot.com/

1 Like

@buggyj Can this be used in above discussed situation.

It could be used, however I have not used this code for many years. It seems to function with 5.3.3 but I do not have time to thoroughly check that it does not break some feature that I do not use.