How to apply style for the inbuilt markdown tags?

Question

I am learning reactjs and I am trying to create a text editor where I want to do indentation for the text which is selected based on the start and end index.

I can get the selected text, and I can apply bold, italic using marked package like ** for bold and _ for italic, etc, but I cannot apply styles like text-align, text-decoration for the marked tags.

How can I apply styles for the marked tags? Is there any other way to do this?

Volumetric

Answer 1

You would need to define CSS rules to style the generated HTML. If you want a style to apply only to a single paragraph (or a subset of paragraphs), then you may need to use raw HTML in your Markdown to define a class on the paragraph or at least define an inline style.

As the original syntax rules state (emphasis added):

Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web.

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself.

As Markdown is not a "publishing format," providing a way to style/layout your text is out-of-scope for Markdown. That said, it is not impossible as you can include raw HTML (and HTML is a publishing format). For example, the following raw HTML will indent a paragraph:

<p style="padding-left:4em">A paragraph which is indented.<p>

Or, if you have some styles defined in CSS:

.indent {
    padding-left: 4em;
}

Then you could use raw HTML to assign that class to a paragraph:

<p class="indent">A paragraph which is indented.<p>

The downside of doing it this way is that, as per the rules, Markdown text is not processed inside block-level raw HTML tags. Which means your links and bold and italic text will also need to be formatted with raw HTML.

Another possibility is to use the non-standard Attribute Lists originally introduced by the Markuru implementation of Markdown and later adopted by a few others (there may be more, but I'm only aware of these four). In that case, you could assign a class to a Markdown paragraph (avoiding the need for raw HTML) and then use CSS to define a layout for the class. However, you absolutely must be using one of the few implementations which actually support the non-standard feature and your documents are no longer portable to other systems.

Guggle