Bike Guide

Appearance

Bike HTML Format ​

Bike (.bike) is Bike's native file format and the one I recommend for everyday use. It supports every Bike feature with full fidelity. It's also a valid HTML document, so you can open a .bike file directly in any web browser and it renders as a nested list.

Because the file is well-formed XML as well as HTML, you can also process .bike files with standard XML tools. XPath and XQuery work over them, which is handy for searching across a whole folder of outlines.

If you want a plain-text format instead, see Bike Markdown Format. For an overview of all of Bike's formats, see Using Documents.

Document Structure ​

A .bike file is an HTML document. The outline lives in a nested list inside the <body>:

html
<?xml version="1.0" encoding="UTF-8"?>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <ul>
      <li id="aR3">
        <p>A plain row</p>
      </li>
    </ul>
  </body>
</html>
  • The top-level <ul> is the outline's hidden root.
  • Each row is an <li> containing a <p> with the row's text.
  • A row that contains other rows holds a nested <ul> of child <li> elements, which is how hierarchy is encoded.

Rows ​

Each <li> carries the row's identity and metadata as attributes:

  • id: the row's persistent id, stable across edits and used by row links.
  • data-type: the row type, written only when it isn't the default body. For example data-type="heading" or data-type="task". Type values are heading, quote, code, note, task, ordered, unordered, log, page, and hr.
  • data-created / data-modified: ISO 8601 timestamps, written when the document is set to keep row dates.

Row Attributes ​

Rows can carry extra attributes. Standard HTML attributes (class, title, style, lang, dir, xml:lang) are written as-is. Every other attribute is prefixed with data- so the file stays valid HTML. For example, when you check off a task, Bike records it as data-status:

html
<li id="cT2" data-type="task" data-status="done">
  <p>A finished task</p>
</li>

A file that carries data-done instead was written by an older version of Bike. That attribute doesn't mean anything now, so those tasks read as unfinished until you let Bike convert the document.

Text Formatting ​

Inline formatting inside a row's <p> uses standard HTML tags:

FormatTag
Bold<strong>
Italic<em>
Code<code>
Strikethrough<s>
Highlight<mark>
Superscript<sup>
Subscript<sub>
Link<a href="…">

So a row with mixed formatting looks like this:

html
<li id="dF9">
  <p>Some <strong>bold</strong> and <em>italic</em> text with a <a href="https://example.com">link</a></p>
</li>

Document Metadata ​

The <head> always includes <meta charset="utf-8">. When the document has metadata to store (such as the root id or your spell-checker's ignored words), Bike writes it as a JSON block in a script element:

html
<head>
  <meta charset="utf-8">
  <script id="outline-metadata" type="text/json">
    {"root-id":"c43J5daN"}
  </script>
</head>

Bike manages this block automatically; you don't need to edit it by hand.

Example ​

Here's a complete .bike document showing several features together:

html
<?xml version="1.0" encoding="UTF-8"?>
<html>
  <head>
    <meta charset="utf-8">
    <script id="outline-metadata" type="text/json">
      {"root-id":"root123"}
    </script>
  </head>
  <body>
    <ul>
      <li id="aR3" data-type="heading">
        <p>Project Notes</p>
        <ul>
          <li id="bX7">
            <p>A row with <strong>bold</strong> and <em>italic</em> text</p>
          </li>
          <li id="cT2" data-type="task" data-done="2024-02-26T12:00:00Z">
            <p>Write the first draft</p>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

See also ​