Search code examples
htmltextmarkdownbox

Can I create a box around text in Markdown using HTML?

example look

I'm writing with Markdown, and I want to put some text into a box. Since Markdown supports most of HTML(e.g I use <mark>keywords</mark> to highlight keywords), I try the following first but nothing happens.

<div class="boxed">
this is the text.
</div>

I know there're other ways to highlight text in Markdown, but is there an easy way to actually create a box around text?

Solution

  • First of all using

    <div class="boxed">
this is the text.
</div>

    alone won't do anything.

    Use this code if you want a box exactly like that

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title</title>
    <style>
      /* Whatever that is inside this <style> tag is all styling for your markup / content structure.
      /* The . with the boxed represents that it is a class */
      .boxed {
        background: #F2F2F2;
        color: black;
        border: 3px solid #535353;
        margin: 0px auto;
        width: 456px;
        padding: 10px;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <!-- This is the markup of your box, in simpler terms the content structure. -->
    <div class="boxed">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem quos esse
      at. Eaque porro vel soluta vero labore. Eius possimus ipsum deleniti
      perferendis quas perspiciatis reprehenderit adipisci fuga rerum velit.
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed minus
      voluptatem consequatur fugiat excepturi reiciendis nulla! Modi dignissimos
      molestiae perspiciatis commodi! Autem, deleniti neque aperiam excepturi
      sunt corrupti ipsam voluptatum!
    </div>
  </body>
</html>

    Another way to make a "box" is blockquotes in the markdown. You can use > to make blockquote elements using markdown, but they'll still need some styling in your CSS to look like that.

    So you can do:

    > Huzzah! I am a box of culture.

    On StackOverflow, a blockquote looks like this for example:

    Huzzah! I am a box of culture.