web/index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
  <meta charset="utf-8" />
  <meta name="generator" content="pandoc" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  <title>djot</title>
  <style>
    html {
      line-height: 1.5;
      font-family: Georgia, serif;
      font-size: 16px;
      color: #1a1a1a;
      background-color: #fdfdfd;
    }
    body {
      margin: 0 auto;
      max-width: 42em;
      padding-left: 50px;
      padding-right: 50px;
      padding-top: 50px;
      padding-bottom: 50px;
      hyphens: auto;
      overflow-wrap: break-word;
      text-rendering: optimizeLegibility;
      font-kerning: normal;
    }
    @media (max-width: 600px) {
      body {
        font-size: 0.9em;
        padding: 1em;
      }
      h1 {
        font-size: 1.8em;
      }
    }
    @media print {
      body {
        background-color: transparent;
        color: black;
        font-size: 12pt;
      }
      p, h2, h3 {
        orphans: 3;
        widows: 3;
      }
      h2, h3, h4 {
        page-break-after: avoid;
      }
    }
    p {
      margin: 1em 0;
    }
    a {
      color: #1a1a1a;
    }
    a:visited {
      color: #1a1a1a;
    }
    img {
      max-width: 100%;
    }
    h1, h2, h3, h4, h5, h6 {
      margin-top: 0.5em;
    }
    h5, h6 {
      font-size: 1em;
      font-style: italic;
    }
    h6 {
      font-weight: normal;
    }
    ol, ul {
      padding-left: 1.7em;
      margin-top: 1em;
    }
    li > ol, li > ul {
      margin-top: 0;
    }
    blockquote {
      margin: 1em 0 1em 1.7em;
      padding-left: 1em;
      border-left: 2px solid #e6e6e6;
      color: #606060;
    }
    code {
      font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
      font-size: 85%;
      margin: 0;
    }
    pre {
      margin: 1em 0;
      overflow: auto;
    }
    pre code {
      padding: 0;
      overflow: visible;
      overflow-wrap: normal;
    }
    .sourceCode {
     background-color: transparent;
     overflow: visible;
    }
    hr {
      background-color: #1a1a1a;
      border: none;
      height: 1px;
      margin: 1em 0;
    }
    table {
      margin: 1em 0;
      border-collapse: collapse;
      width: 100%;
      overflow-x: auto;
      display: block;
      font-variant-numeric: lining-nums tabular-nums;
    }
    table caption {
      margin-bottom: 0.75em;
    }
    tbody {
      margin-top: 0.5em;
      border-top: 1px solid #1a1a1a;
      border-bottom: 1px solid #1a1a1a;
    }
    th {
      border-top: 1px solid #1a1a1a;
      padding: 0.25em 0.5em 0.25em 0.5em;
    }
    td {
      padding: 0.125em 0.5em 0.25em 0.5em;
    }
    header {
      margin-bottom: 4em;
      text-align: center;
    }
    #TOC li {
      list-style: none;
    }
    #TOC ul {
      padding-left: 1.3em;
    }
    #TOC > ul {
      padding-left: 0;
    }
    #TOC a:not(:hover) {
      text-decoration: none;
    }
    code{white-space: pre-wrap;}
    span.smallcaps{font-variant: small-caps;}
    span.underline{text-decoration: underline;}
    div.column{display: inline-block; vertical-align: top; width: 50%;}
    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
    ul.task-list{list-style: none;}
    .display.math{display: block; text-align: center; margin: 0.5rem auto;}

    .pronunciation {
      color: grey;
    }
    .pronunciation:hover {
      cursor: pointer;
    }
    .pronunciation a {
      text-decoration: none;
      color: grey;
    }
  </style>
  <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
  <![endif]-->
</head>
<body>
  <h1 id="djot">Djot <span class="pronunciation">(<a href="djot.wav">/dʒɑt/</a>)</span></h1>
<p>Djot is a light markup syntax.
It derives most of its features from commonmark, but it fixes a few things that
make commonmark's syntax complex and difficult to parse efficiently. It is also
much fuller-featured than commonmark, with support for definition lists,
footnotes, tables, several new kinds of inline formatting (insert, delete,
highlight, superscript, subscript), math, smart punctuation, attributes that
can be applied to any element, and generic containers for block-level,
inline-level, and raw content.
The project began as an attempt to implement some of the ideas I suggested in <a href="https://johnmacfarlane.net/beyond-markdown.html">Beyond Markdown</a>.</p>

<ul>
  <li><a href="https://github.com/jgm/djot#rationale">Design goals and explanation of design decisions</a></li>
  <li><a href="https://htmlpreview.github.io/?https://github.com/jgm/djot/blob/master/doc/syntax.html">Syntax description</a></li>
  <li><a href="https://github.com/jgm/djot/blob/main/doc/quickstart-for-markdown-users.md">Quick start for Markdown users</a></li>
  <li><a href="https://github.com/jgm/djot/discussions">Discussion forum</a></li>
  <li><a href="playground/">Live sandbox</a></li>
  <li>Implementations in
    <a href="https://github.com/jgm/djot.js">JavaScript</a>,
    <a href="https://github.com/jgm/djot.lua">Lua</a>,
    <a href="https://github.com/aarroyoc/djota">Prolog</a>,
    <a href="https://github.com/hellux/jotdown">Rust</a>,
    <a href="https://github.com/sivukhin/godjot">Go</a>.
  </li>
</ul>

<p>Djot isn't completely stable yet, minor future changes to the syntax are expected.
The official JavaScript implementation is complete and ready for use.</p>

<p>To install the parser locally using <a href="https://www.npmjs.com">npm</a>:<p>
<pre><code>$ npm install -g @djot/djot
$ djot --help</code></pre>
<p>To convert a GitHub-flavored Markdown document to djot, using
djot and <a href="https://pandoc.org">pandoc</a>:</p>
<pre><code>$ pandoc mydoc.md -f gfm -t json | djot -f pandoc -t djot &gt; mydoc.dj</code></pre>
<p>To convert a djot document to any format pandoc supports (in this
example, docx):</p>
<pre><code>$ djot -t pandoc mydoc.dj | pandoc -f json -s -t docx -o mydoc.docx</code></pre>
</body>
</html>