Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Normal

Bold

Italic

~~Strikethrough~~

Bold and italic

Highlight

Link

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam risus enim, imperdiet at blandit sit amet, ullamcorper ullamcorper lectus. Curabitur lacinia, lacus a pulvinar dictum, dolor diam feugiat eros, eu porta risus nibh ut massa. Etiam laoreet tincidunt odio, vel semper arcu auctor sit amet. In scelerisque massa non turpis faucibus, vitae iaculis lacus finibus. Aenean vehicula posuere metus, a efficitur orci maximus sit amet. Donec vel sem consectetur, porttitor augue at, cursus purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed dapibus enim ut augue porttitor, scelerisque tristique tortor sollicitudin. Aenean pellentesque tortor eu tempor lobortis.

Cras vitae velit iaculis, ultricies felis in, sagittis justo. Praesent euismod ligula malesuada euismod porta. Nulla a massa sodales, tincidunt erat quis, feugiat leo. Quisque tincidunt, augue scelerisque congue sollicitudin, purus risus consequat nunc, non sollicitudin ex sapien nec nulla. Proin non venenatis ligula, ac varius sem. Praesent vel neque quis leo dignissim sollicitudin. Curabitur rutrum bibendum est, vitae aliquet justo posuere fermentum.

Images

If you want to embed images, this is how you do it:

Image of Yaktocat

Yaktocat

![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)

<p class="caption">Yaktocat</p>

Quotes

If you'd like to quote someone, use the > character before the line:

Coffee. The finest organic suspension ever devised... I beat the Borg with it.

Captain Janeway

If you'd like to quote someone, use the > character before the line:

> Coffee. The finest organic suspension ever devised... I beat the Borg with it.
> - Captain Janeway

Code

There are many different ways to style code with GitHub's markdown. If you have inline code blocks, wrap them in backticks: var example = true. If you've got a longer block of code, you can indent with four spaces:

if (isAwesome){
  return true
}

GitHub also supports something called code fencing, which allows for multiple lines without indentation:

if (isAwesome){
  return true
}

And if you'd like to use syntax highlighting, include the language:

if (isAwesome){
  return true
}

Horizontal rule

Lists

Unordered

Item 1
Item 2
- Item 2a
- Item 2b

Ordered

Item 1
Item 2
Item 3
1. Item 3a
2. Item 3b

Tables

First Header	Second Header
Content from cell 1	Content from cell 2
Content in the first column	Content in the second column

Footers

This sentence requires further information¹.

Smart Quotes

They're really quite 'smart'.

Syntax highlighting

Auto-detect language

def foo():
    if not bar:
        return True

Explicit language

def foo():
    if not bar:
        return True

Custom Styles

There are a number CSS classes that can be used and relied upon in within content.

img.invert

Images will be inverted when displayed in dark mode. This is great for things like sketches (as exported from Notes).

<img class="invert" src="sketch.png" />

p.caption

<p class="caption">Yaktocat</p>

Yaktocat

.low-priority

Images in containers with the low-priority class will be fully desaturated (grayscale(100%)) and will fully saturate on hover. This is intended to make lower priority items such as archived apps and hardware projects less visually prominent.

<div class="low-priority">
    <img src="https://octodex.github.com/images/yaktocat.png">
</div>

Grids

Content can be organized into grids with equal width columns using the grid class on a container:

<div class="grid prefer-3-columns dense">
  <img src="issue-21-cover.png" />
  <img src="issue-22-cover.png" />
  <img src="issue-24-cover.png" />
</div>

Traits can be modified with the following additional CSS classes:

prefer-5-columns -- never exceed 5 columns
prefer-4-columns -- never exceed 4 columns
prefer-3-columns -- never exceed 3 columns
prefer-2-columns -- never exceed 2 columns
dense -- minimal spacing between items
sparse -- generous spacing between items

For example, the above code would generate the following:

Symbol Links

Links can be annotated with named symbols which are used to select theme-appropriate icons.

`download`

<a class="symbol download">Download Link</a>

Download Link

`zip`

<a class="symbol zip">Zip Link</a>

Zip Link

`pdf`

<a class="symbol pdf">PDF Link</a>

PDF Link

`github`

<a class="symbol github">GitHub Link</a>

GitHub Link

`thingiverse`

<a class="symbol thingiverse">Thingiverse Link</a>

Thingiverse Link

Tilt Extensions

incontext provides Tilt extensions which can be used to add functionality.

Panorama

![Panorama of my office](office.jpeg)

Gallery

{% gallery "images" %}

The site includes a number of template fragments that are intended to be used directly within Markdown content.

Video

Video files can be included in one of two ways.

Using a Tilt extension:

{% video("turtle.mov") %}

Using a Markdown image tag:

![Video description here](turtle.mov)

Audio

Audio files are not currently supported as top-level media format in InContext, meaning they can only be rendered using a Tilt extension:

{% audio("rincewind.mp3") %}

Showcase

Showcase renders a media grid of posts matching a tag.

For example,

{% showcase("wallpaper") %}

Tagged Posts

{% tagged("elsewhere") %}

Elsewhere: Watching Tokyo – December 5, 2018
Projects, 2022 – January 2, 2023

Custom Tags

Location

Locations are supported through custom tags:

<x-map latitude="35.671336"
       longitude="139.702941"
       title="Harajuku Station" />

latitude and longitude are required. title is optional.

Named Location

Anonymous Location

Multiple Locations

Multiple locations can be specified using the additional x-location tag. For example,

<x-map>
    <x-location latitude="35.671336"
                longitude="139.702941">
        Harajuku Station
    </x-location>
    <x-location latitude="37.766655"
                longitude="-122.418129">
        1515 15th St
    </x-location>
</x-map>

The contents of the x-location tag will be used as the title for the location label.

Harajuku Station 1515 15th St

Controls

Controls can be enabled by adding the controls attribute (though Apple Maps may choose not to display these if the map is too small). For example,

<x-map class="large" controls>
    <x-location latitude="35.671336"
                longitude="139.702941">
        Harajuku Station
    </x-location>
    <x-location latitude="37.766655"
                longitude="-122.418129">
        1515 15th St
    </x-location>
</x-map>

Harajuku Station 1515 15th St

3D Model

<x-model src="model.stl" />

And here it is. ↩