Templates

このサイトで使うMarkdownのテンプレート集

Example:

Copy
---
title: 'My Example'
description: 'A simple description for this page'
image: /banner.jpeg
---
Wow, this is a nice page

Embeding files

In a documentation website, sometimes you will need to embed well known services (like CodeSandbox, Twitter, or others...). If you need to do it, you can simply copy-paste the link (powered by the awesome gatsby-remark-embeder). Make sure to check the supported services.

Code Highlight

Title

To show the title, just add it to your code block. Ex: title=src/myfile.css

src/myfile.css
Copy
.gatsby::before {
  content: 'niceee...';
}

Line numbers

If you want to show line number, just add a option lineNumbers=true.

Copy
1const rocket = {
2  launch: () => console.log('Launching...'),
3};
4
5rocket.launch();

React live

As mentioned in the introduction, this theme uses react-live, so you can create a playground for live editing React components.

To use it, just add a live=true option to your code block.

function MyComponent() {
  function handleButtonClick() {
    alert('wowww');
  }

  return <button onClick={handleButtonClick}>Hey, click me!</button>;
}

render(<MyComponent />);
function MyComponent() {
  function handleButtonClick() {
    alert('wowww');
  }
  return <button onClick={handleButtonClick}>Hey, click me!</button>;
}
render(<MyComponent />);
Hey, click me!