/

Markdown features

markdown
On this page
  • Images
  • Fenced code blocks
  • Emoji short codes
  • Details/Summary
  • Tables
  • Link truncation

This theme adds a few additional features to standard markdown.

Images

opengraph logo

Embed images using the usual markdown syntax.

md
![](/opengraph.png)

Fenced code blocks

Like you use with GitHub, e.g.

```js
const variable = 42
```

Highlighting lines in code blocks

To highlight lines, wrap line with this comment before: // highlight-start and this after // highlight-end. Ensure that these comments are not indented.

css
.grid {
// highlight-start
display: grid;
grid-gap: 30px;
// highlight-end
grid-template-columns: repeat(auto-fill, 112px);
/* or this */
grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
```css
.grid {
// highlight-start
display: grid;
grid-gap: 30px;
// highlight-end
grid-template-columns: repeat(auto-fill, 112px);
/* or this */
grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
```

Emoji short codes

Like this: ๐Ÿ˜‚ ๐Ÿ†

md
Like this: :joy: :eggplant:

Details/Summary

Open example

Tada! ๐ŸŽ‰

html
<details>
<summary>Open example</summary>
Tada! :tada:
</details>

Tables

Tables are responsive by default. If you need to limit line length for a cell, add a <br/> tag to break the lines.

TablesAreCool
This is a rowwith somecontent
This is another rowwith a lot more content.
Nullam netus eu fringilla turpis parturient dignissim
Velit ut mauris penatibus
turpis commodo consectetur

This uses remark-truncate-links to truncate links. e.g. github.com/mrmartin...de-notes

Edit this page
Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
logo
A Gatsby theme for storing your code-related notes