CODEWITHSUNDEEP
listlatexmarkdown
RuaosP1
RuaosP1

Reputation: 89

custom item labels in markdown

In latex the following produces a nice output (more examples here)

\begin{itemize}
\item[$ABC$]  Definition and details of $ABC$.
\item[$EFG-PQE$] Definition and details of $EFG$ and Definition and details of $PQR$. Writing this sentence to make it multiline. 
\end{itemize}

enter image description here

How to get similar output in Markdown (.md) file?

Upvotes: 1

Views: 1397

Answers (1)

Chris
Chris

Reputation: 137075

We need to consider the format this Markdown is intended to end up in.

Given that GitLab renders Markdown to HTML, description lists are your best bet:

<dl>
  <dt>ABC</dt>
  <dd>Definition and details of ABC.</dd>

  <dt>EFG-PQE</dt>
  <dd>Definition and details of EFG and Definition and details of PQR.</dd>
</dl>

The list itself is defined by a <dl> tag. Terms go into a <dt> and descriptions go into a <dl>.

Since GitLab-Flavored Markdown has no special syntax for description lists, you'll have to use inline HTML. And since Markdown is not normally processed in block-level HTML tags, if you want to format the terms in italics, as your rendered LaTeX example shows, you'll have to do one of two things:

  1. Use inline HTML again:

    <dl>
  <dt>ABC</dt>
  <dd>Definition and details of <em>ABC</em>.</dd>
  <!--                          ^^^^   ^^^^^   -->
</dl>

    This option should work with pretty much any Markdown tool.

  2. Put the Markdown content on its own line, separated from the HTML by whitespace:

    <dl>
  <dt>ABC</dt>
  <dd>

  Definition and details of _ABC_.

  </dd>
</dl>

    This option works in GitLab- and GitHub-Flavored Markdown. It also seems to work in Visual Studio Code's Markdown preview and on Stack Overflow.

Exactly how this gets rendered depends on the CSS being applied. Here's how Stack Overflow displays description lists:

ABC
Definition and details of ABC.
EFG-PQE
Definition and details of EFG and Definition and details of PQR.

And here is how it looks in a README.md on GitLab:

Screenshot

Upvotes: 2

Related Questions