Can I define a class name on paragraph using Markdown

Question

Can I define a class name on paragraph using Markdown  If so  how

User · Answer

Here is a working example for kramdown following @Yarin's answer.

A simple paragraph with a class attribute.
{:.yourClass}

Reference: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists

User · Answer

It should also be mentioned that  lt span gt  tags allow inside them -- block-level items negate MD natively inside them unless you configure them not to do so  but in-line styles natively allow MD within them  As such  I often do something akin to     This is a superfluous paragraph thing    lt span class  class-red  gt And thus I delve into my topic  Lorem ipsum lollipop bubblegum  lt  span gt   And thus with that I conclude    I am not 100  sure if this is universal but seems to be the case in all MD editors I ve used

User · Answer

Dupe  How do I set an HTML class attribute in Markdown     Natively  No  But     No  Markdown s syntax can t  You can set ID values with Markdown Extra through   You can use regular HTML if you like  and add the attribute markdown  1  to continue markdown-conversion within the HTML element  This requires Markdown Extra though    lt p class  specialParagraph  markdown  1  gt    Another paragraph   which allows  Markdown  within it   lt  p gt    Possible Solution   Untested and intended for  lt blockquote gt    I found the following online   Function  function  DoBlockQuotes callback  matches            cut           add id and class details         id    class           if preg match all              -  a-zA-Z0-9            bq  matches             foreach   matches 1  as  match                if  match 0         type    id               else  type    class                  type         type      trim  match                               foreach   matches 0  as  match                 bq   str replace  match     bq                        return  HashBlock            lt blockquote  id   class  gt  n bq n lt  blockquote gt             n n       Markdown   gt   className   id This is the blockquote   Result   lt blockquote id  id  class  className  gt       lt p gt This is the blockquote lt  p gt   lt  blockquote gt

User · Answer

In slim markdown use this   markdown       cool-heading     Some Title   Translates to    lt h1 class  cool-heading  gt Some Title lt  h1 gt

User · Answer

As mentioned above markdown itself leaves you hanging on this   However  depending on the implementation there are some workarounds   At least one version of MD considers  lt div gt  to be a block level tag but  lt DIV gt  is just text   All broswers however are case insensitive   This allows you to keep the syntax simplicity of MD  at the cost of adding div container tags   So the following is a workaround    lt DIV class foo gt     Paragraphs here inherit class foo from above    lt  div gt    The downside of this is that the output code has  lt p gt  tags wrapping the  lt div gt  lines  both of them  the first because it s not  and the second because it doesn t match   No browser fusses about this that I ve found  but the code won t validate   MD tends to put in spare  lt p gt  tags anyway   Several versions of markdown implement the convention  lt tag markdown  1  gt  in which case MD will do the normal processing inside the tag   The above example becomes    lt div markdown  1  class foo gt     Paragraphs here inherit class foo from above    lt  div gt    The current version of Fletcher s MultiMarkdown allows attributes to follow the link if using referenced links

User · Answer

If your environment is JavaScript  use markdown-it along with the plugin markdown-it-attrs   const md   require  markdown-it      const attrs   require  markdown-it-attrs    md use attrs    const src    paragraph   className  id and attributes        render let res   md render src   console log res     Output   lt p class  className  id  id  and  attributes  gt paragraph lt  p gt    jsfiddle  Note  Be aware of the security aspect when allowing attributes in your markdown   Disclaimer  I m the author of markdown-it-attrs

User · Answer

If your flavour of markdown is kramdown  then you can set css class like this       nameofclass  paragraph is here   Then in you css file  you set the css like this     nameofclass     color   000

User · Answer

Raw HTML is actually perfectly valid in markdown   For instance   Normal  markdown  paragraph    lt p class  myclass  gt This paragraph has a class  myclass  lt  p gt    Just make sure the HTML is not inside a code block

User · Answer

Markdown should have this capability  but it doesn t  Instead  you re stuck with language-specific Markdown supersets   PHP  Markdown Extra Ruby  Kramdown  Maruku  But if you need to abide by true Markdown syntax  you re stuck with inserting raw HTML  which is less ideal

User · Answer

If you just need a selector for Javascript purposes  like I did   you might just want to use a href attribute instead of a class or id   Just do this    lt a href   foo  gt Link lt  a gt    Markdown will not ignore or remove the href attribute like it does with classes and ids   So in your Javascript or jQuery you can then do      a href   foo     click function event             do your thing          event preventDefault          At least this works in my version of Markdown

[css] Can I define a class name on paragraph using Markdown?

Examples related to css

Examples related to markdown