A Simple HTML Article Format

A couple of weeks ago I wrote about a lightweight HTML presentation format, snap slides. Today I want to briefly introduce a simple and lightweight HTML article format. You can find an example page here, which is also its documentation. You can generate an article like this with either the R package litedown or Quarto or any other tool that can generate HTML output. Under the hood, this article format is based on CSS and JS, which can be reused on any web pages.

If you use R Markdown or plain Markdown, you can install.packages('litedown') and specify the output format:

output:
  litedown::html_format:
    meta:
      css: ["default", "@article"]
      js: ["@sidenotes", "@appendix"]

If you use Quarto, you can also include the relevant CSS and JS:

format:
  html:
    minimal: true
    toc: true
    include-after-body:
      text: |
        <script src="https://cdn.jsdelivr.net/npm/@xiee/utils/js/sidenotes.min.js" defer></script>
        <script src="https://cdn.jsdelivr.net/npm/@xiee/utils/js/appendix.min.js" defer></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xiee/utils/css/default.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xiee/utils/css/article.min.css">
        <style type="text/css">header{text-align: center;}</style>

If you use other HTML generators, you can reuse the HTML code in the above Quarto example (in the text field).

The main features of this article format are: side elements (TOC, footnotes, sidenotes, and references), full-width elements, floating quotes, margin embedding, and appendices. Again, you can read its documentation to know more.

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).