Markdown Syntax
OpenLaws uses the Commonmark specification of Markdown to format our rich-text and structure law documents. This allows us to create a common data format across hundreds of authoritative laws sources in rich HTML, plaintext, Word documents, and PDF documents. CommonMark allows us to capture the nuances of the source documents, such as italic and bold text, but also footnotes and hierarchies of bullet points used for a pincite. Additionally, we use GitHub Flavored Markdown extensions of CommonMark to add other document features such as tables.
Complex ExampleCopied!
The Markdown below belongs to 20 U.S.C. 1070.
1. {{< pincite identifier=\"a\" display=\"a\" >}} Purpose
It is the purpose of this part, to assist in making available the benefits of postsecondary education to eligible students (defined in accordance with section 1091 of this title) in institutions of higher education by-
1. {{< pincite identifier=\"a_1\" display=\"1\" >}} providing Federal Pell Grants to all eligible students;
1. {{< pincite identifier=\"a_2\" display=\"2\" >}} providing supplemental educational opportunity grants to those students who demonstrate financial need;
1. {{< pincite identifier=\"a_3\" display=\"3\" >}} providing for payments to the States to assist them in making financial aid available to such students;
1. {{< pincite identifier=\"a_4\" display=\"4\" >}} providing for special programs and projects designed (A) to identify and encourage qualified youths with financial or cultural need with a potential for postsecondary education, (B) to prepare students from low-income families for postsecondary education, and (C) to provide remedial (including remedial language study) and other services to students; and
1. {{< pincite identifier=\"a_5\" display=\"5\" >}} providing assistance to institutions of higher education.
{ .parens-decimal }
1. {{< pincite identifier=\"b\" display=\"b\" >}} Secretary required to carry out purposes
The Secretary shall, in accordance with subparts 1 through 9 of this part, carry out programs to achieve the purposes of this part.
{ .parens-lower-alpha }It renders into this HTML:
<ol class="parens-lower-alpha">
<li><span class="pincite-display">a</span> Purpose<br>
It is the purpose of this part, to assist in making available the benefits of postsecondary education to eligible students (defined in accordance with section 1091 of this title) in institutions of higher education by-
<ol class="parens-decimal">
<li><span class="pincite-display">1</span> providing Federal Pell Grants to all eligible students;</li>
<li><span class="pincite-display">2</span> providing supplemental educational opportunity grants to those students who demonstrate financial need;</li>
<li><span class="pincite-display">3</span> providing for payments to the States to assist them in making financial aid available to such students;</li>
<li><span class="pincite-display">4</span> providing for special programs and projects designed (A) to identify and encourage qualified youths with financial or cultural need with a potential for postsecondary education, (B) to prepare students from low-income families for postsecondary education, and (C) to provide remedial (including remedial language study) and other services to students; and</li>
<li><span class="pincite-display">5</span> providing assistance to institutions of higher education.</li>
</ol>
</li>
<li><span class="pincite-display">b</span> Secretary required to carry out purposes<br>
The Secretary shall, in accordance with subparts 1 through 9 of this part, carry out programs to achieve the purposes of this part.
</li>
</ol>When styled with CSS, it looks something like this:
Diving into the Complex ExampleCopied!
Let’s look at what’s happening here. The first line is unindented which starts a Markdown block for an ordered list. Ordered lists in Markdown and HTML by default are numbered lists, ex: “1.”, “2.”, …
1. {{< pincite identifier=\"a\" display=\"a\" >}} PurposeIf we look to the bottom of the Markdown, we’ll this strange, unindented line.
{ .parens-lower-alpha }This line is end of the the Markdown block and uses a special “attribute” annotation used to add a CSS class attribute. You can see the final result in the HTML: an ordered list with the CSS class “parens-lower-alpha” to represent an ordered list of lower case alphabetical bullet points surrounded by parentheses.
<ol class="parens-lower-alpha">
<li><span class="pincite-display">a</span> Purpose<br>Combine this with some magical CSS (See MDN counter()):
ol.parens-lower-alpha > li::before {
content: '(' counter(pincites, lower-alpha) ') ';
}And we get this…
…with zero JavaScript and all the structure of the document represented in Markdown and semantic HTML!
Additional Markdown UsagesCopied!
We also use these Markdown features and extensions to data model law documents: