Examples
- Elsewhere: Watching Tokyo – December 5, 2018
- Projects, 2022 – January 2, 2023
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Normal
Bold
Italic
Strikethrough
Bold and italic
Highlight
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](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
- Item 3a
- 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 information1.
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>
.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 columnsprefer-4-columns
-- never exceed 4 columnsprefer-3-columns
-- never exceed 3 columnsprefer-2-columns
-- never exceed 2 columnsdense
-- minimal spacing between itemssparse
-- 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>
zip
<a class="symbol zip">Zip Link</a>
pdf
<a class="symbol pdf">PDF Link</a>
github
<a class="symbol github">GitHub Link</a>
thingiverse
<a class="symbol thingiverse">Thingiverse Link</a>
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") %}
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.
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>
3D Model
<x-model src="model.stl" />
-
And here it is. ↩