Convert Definition Lists (<dl>) to Frames (<fieldset>)

When I suggested a department chair in 2019 that they may consider opening a blog so that all students and faculty in the department can write together (which sounded exciting to me), he expressed a concern that some readers might remember authors’ mistakes in the posts. Considering the reputation of the whole department, that is a valid concern. However, to err is human (and to forgive is divine). Everyone makes mistakes. I often update my old posts to correct mistakes or write a note saying certain information is oudated after a few years.

My notes did not have a formal form. Sometimes a note may be a blockquote, and sometimes it is just a normal paragraph. Today I was thinking how I could make them more consistent. One constraint is that it would be nice if I could express it in pure Markdown. Unfortunately, CommonMark does not support fenced Divs, otherwise I would use a fenced Div like:

::: Note
This post is outdated. Please ignore it.
:::

Eventually I decided to hack at definition lists. A note will be like:

Update on 2023-11-09

:   Please ignore this post. The method no longer works.

This will render to the HTML tag <dl> (with <dt> and <dd> inside).

Next I started to think about styling, and recalled the <fieldset> tag that I learned sixteen years ago.¹ With a few lines of JavaScript, I was able to change <dl> to <fieldset>. Below is a demo:

Notice on 2023-11-07

Thank you for noticing this new notice!

Your noticing it has been noted, and will be reported to the authorities.

If you want to use my JS code, you can load it via:

<script src="https://cdn.jsdelivr.net/npm/@xiee/utils/js/dl-fieldset.min.js" defer></script>

Then you only need to write Markdown:

Title

:   Content

which will be rendered to HTML:

<dl>
  <dt>Title</dt>
  <dd>Content</dd>
</dl>

Then my JS code will convert it to:

<fieldset>
  <legend>Title</legend>
  Content
</fieldset>

Mission complete.

Donate

As a freelancer (currently working as a contractor) and a dad of three kids, I truly appreciate your donation to support my writing and open-source software development! Your contribution helps me cope with financial uncertainty better, so I can spend more time on producing high-quality content and software. You can make a donation through methods below.

• Venmo: @yihui_xie, or Zelle: xie@yihui.name

• Paypal

  • If you have a Paypal account, you can follow the link https://paypal.me/YihuiXie or find me on Paypal via my email xie@yihui.name. Please choose the payment type as “Family and Friends” (instead of “Goods and Services”) to avoid extra fees.

  • If you don’t have Paypal, you may donate through this link via your debit or credit card. Paypal will charge a fee on my side.

• Other ways:

  WeChat Pay (微信支付：谢益辉)	Alipay (支付宝：谢益辉)

When sending money, please be sure to add a note “gift” or “donation” if possible, so it won’t be treated as my taxable income but a genuine gift. Needless to say, donation is completely voluntary and I appreciate any amount you can give.

Please feel free to email me if you prefer a different way to give. Thank you very much!

I’ll give back a significant portion of the donations to the open-source community and charities. For the record, I received about $30,000 in total (before tax) in 2024-25, and gave back about $15,000 (after tax).