How can I create a text box for a note in markdown

Question

I am writing a document in markdown  I am using the wonderful pandoc to create docx and tex files from the markdown source  I would like to have a textbox for tips and notes to readers the way programming books often do  I cannot figure out how to do this in markdown  Can you help

User · Answer

Here s a simple latex-based example    --- header-includes      -  usepackage most  tcolorbox      -  definecolor light-yellow  rgb  1  0 95  0 7      -  newtcolorbox myquote  colback light-yellow grow to right by -10mm grow to left by -10mm  boxrule 0pt boxsep 0pt breakable      -  newcommand  todo  1   begin myquote   textbf TODO    emph  1   end myquote   ---  blah blah   todo something   blah   which results in    Unfortunately because this is latex  you can no-longer include markdown inside the TODO box  which is not a huge problem  usually   and it won t work when converting to formats other than PDF  e g  html

User · Answer

What I usually do for putting alert box  e g  Note or Warning  in markdown texts  not only when using pandoc but also every where that markdown is supported  is surrounding the content with two horizontal lines   ---   NOTE    It works with almost all markdown flavours  the below blank line matters    ---   which would be something like this     NOTE  It works with all markdown flavours  the below blank line matters      The good thing is that you don t need to worry about which markdown flavour is supported or which extension is installed or enabled   EDIT  As  filups21 has mentioned in the comments  it seems that a horizontal line is represented by     in RMarkdown  So  the solution mentioned before does not work with all markdown flavours as it was originally claimed

User · Answer

Use the admonition extension  For mkdocs  it can be configured in the mkdocs yml file   markdown extensions      - admonition   Then insert the note in your md files as follows       note       This is a note    See an example here

User · Answer

The following methods work on GitHub  on GitLab    and on Stackoverflow  which now uses CommonMark      One-Line Box made with Blockquote     One-Line Box made with Blockquote     One-Line Box made with Backticks     One-Line Box made with Backticks       Box made with Triple Backticks        Box made with Triple Backticks             Box made with Triple Tildes  remove the spaces between the tildes to make this work         Box made with Triple Tildes     Box made with Four Spaces at the start of each line          Sometimes we must let go of our pride and do what is requested of us         Padm   Amidala         or use horizontal lines   Three dashes  ---  make a horizontal line     Note      Your focus determines your reality         Qui-Gon Jinn     For more configurations  I strongly advise the excellent GitLab Markdown Guide  You can also check the less detailed GitHub basic formatting syntax  You can compare Markdown implementations using Babelmark   Useful hints      to force a newline  put two spaces at the end of the line   to escape special characters  use

User · Answer

I usually insert a blockquote and add a Unicode character memo which is U 1F4DD   inside it             Syntax Demo      gt   bla bla     bla bla        gt       bla bla  bla bla    gt     bla bla  bla bla     Emoji Of course  if you do not like  you can search you like  I am sure there will be one in it is your satisfaction   find more emoji  https   emojipedia org  just search you like icon and copy-paste then done since it is a character  so it suitable for every device   find Code If you don t like copy paste and want to type yourself  you can consider searching the Unicode      p s  You can also pay attention to the emoji version  usually it is the same as the Unicode version   and more icons may appear in the future to your satisfaction   Unicode Version 14 0 Emoji Version 14 0

User · Answer

You may also use https   www npmjs com package markdown-it-container      warning  here be dragons        Will then render as    lt div class  warning  gt   lt em gt here be dragons lt  em gt   lt  div gt

User · Answer

Another solution is to use CSS adjacency and use h4  or higher        note  This is the note content  h4     display  none     hide       h4   p        style the note however you want

User · Answer

With GitHub  I usually insert a blockquote    gt     NOTE      The note content    becomes        NOTE   The note content    Of course  there is always plain HTML

User · Answer

Similar to Etienne s solution  a simple table formats nicely          - -    NOTE    This is something I want you to notice  It has a lot of text  and I want that text to wrap within a cell to the right of the  NOTE   instead of under it     Another alternative  which comes with more emphasis   is to make the content the header of a body-less table     NOTE    This is something I want you to notice  It has a lot of text  and I want that text to wrap within a cell to the right of the  NOTE   instead of under it    - -     Finally  you can include a horizontal line  thematic break  to create a closed box  although the line style is a little different than the header line in the table           - -    NOTE    This is something I want you to notice  It has a lot of text  and I want that text to wrap within a cell to the right of the  NOTE   instead of under it    ---   Note the empty line after the text

User · Answer

Have you tried using double tabs  To make a box   Start on a fresh line Hit tab twice  type up the content Your content should appear in a box   It works for me in a regular Rmarkdown document with html output  The double-tabbed portion should appear in a rounded rectangular light grey box

User · Answer

The simplest solution I ve found to the exact same problem is to use a multiple line table with one row and no header  there is an image in the first column and the text in the second    ----------------------- ------------------------------------   Tip  images tip png   Table multiline text bla bla bla bla                         bla bla bla bla bla bla bla     the                         blank line below is important   ----------------------------------------------------------------   Another approach that might work  for PDF  is to use Latex default fbox directive      fbox My text     Or FancyBox module for more advanced features  and better looking boxes    http   www ctan org tex-archive macros latex contrib fancybox

[markdown] How can I create a text box for a note in markdown?

Examples related to markdown

Examples related to pandoc