Skip to main content

Style Guide

You can write content using GitHub-flavored Markdown syntax. Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.

Markdown Examples#

This page will help you learn about the Markdown used in the Cardano Developer Portal, but the list is not intended to be exhaustive. Read the docusaurus markdown features for more examples.

Let's start with the basics:

Emphasis, aka italics, with *asterisks* or _underscores_.
Strong emphasis, aka bold, with **asterisks** or __underscores__.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
You can even [link to the Forum!](https://forum.cardano.org)

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.

You can even link to the Forum!


Code#

In the developer portal you will often have to display code. You can display code with different syntax highlighting:

```javascriptvar s = 'JavaScript syntax highlighting';alert(s);```
var s = 'JavaScript syntax highlighting';alert(s);

Tabs#

You can use tabs for example to display code examples in different languages:

import Tabs from '@theme/Tabs';import TabItem from '@theme/TabItem';
<Tabs  defaultValue="js"  values={[    {label: 'JavaScript', value: 'js'},    {label: 'PHP', value: 'php'},    {label: 'Python', value: 'py'},  ]}>  <TabItem value="js">
    ```js      function helloWorld() {        console.log('Hello, world!');      }    ```
  </TabItem>  <TabItem value="php">
    ```php      <?php echo '<p>Hello, world!</p>'; ?>    ```
  </TabItem>  <TabItem value="py">
    ```py    def hello_world():      print 'Hello, world!'    ```
  </TabItem></Tabs>
function helloWorld() {  console.log('Hello, world!');}
note

Note that the empty lines above and below each language block (in the *md file) is intentional.


Synching tab choices#

You can also switch multiple tabs at the same time based on user input:

<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},    {label: 'Linux', value: 'linux'},  ]}><TabItem value="win">Use Ctrl + C to copy.</TabItem><TabItem value="mac">Use Command + C to copy.</TabItem><TabItem value="linux">Use Ctrl + C to copy.</TabItem></Tabs>
<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},    {label: 'Linux', value: 'linux'},  ]}><TabItem value="win">Use Ctrl + V to paste.</TabItem><TabItem value="mac">Use Command + V to paste.</TabItem><TabItem value="linux">Use Ctrl + V to paste.</TabItem></Tabs>
Use Ctrl + C to copy.
Use Ctrl + V to paste.

Video embedding#

Use this code to embed YouTube videos:

<iframe width="100%" height="325" src="https://www.youtube.com/embed/U92Ks8rucDQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture fullscreen"></iframe>

Tables#

Colons can be used to align columns:

| Tables        |      Are      |   Cool || ------------- | :-----------: | -----: || col 3 is      | right-aligned |  $1600 || col 2 is      |   centered    |    $12 || zebra stripes |   are neat    |     $1 |
TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

| Markdown | Less      | Pretty     || -------- | --------- | ---------- || _Still_  | `renders` | **nicely** || 1        | 2         | 3          |
MarkdownLessPretty
Stillrendersnicely
123

Inline HTML#

Inline HTML is basically possible, but should be avoided for various reasons.

<dl>  <dt>Definition list</dt>  <dd>Is something people use sometimes.</dd>
  <dt>Markdown in HTML</dt>  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd></dl>
Definition list
Is something people use sometimes.
Markdown in HTML
Does *not* work **very** well. Use HTML tags.

Line Breaks#

Here's a line for us to start with.
This line is separated from the one above by two newlines, so it will be a _separate paragraph_.  This line is a separate line in the _same paragraph_, created either by two blank spaces or explicit <br /> tag at the end of the previous line.

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.
This line is a separate line in the same paragraph, created either by two blank spaces or explicit <br /> tag at the end of the previous line.


Admonitions#

These different admonitions are available to you. As a general rule: don't overdo it and avoid using admonitions in a row.

:::warning
This is a warning
:::
warning

This is a warning

Please try to avoid other style elements, and always keep in mind that people with visual handicaps should also be able to cope with your content.

Editor extensions and configurations#

Last but not least, let's talk about editors, extensions and configurations.

You can use any text editor you like to write markdown. Visual Studio Code, Sublime, Atom, etc. have plugins that help you adhere to style guides by displaying warnings if you break the rules.

Below are some extensions for these editors that help you write clean guides for the developer portal.

markdownlint#

Adds syntax highligting for markdown files and display configurable warnings for invalid formatting.

  • Install the extension via Command Palette (Ctrl+P) using ext install DavidAnson.vscode-markdownlint

  • Add a .markdownlint.json file to your project with the following configuration.

{    "line-length": false,    "MD004" : false,    "MD033":{        "allowed_elements": ["TabItem", "br", "iframe", "dl", "dt","dd", "em"]    },    "MD034" : false,    "MD046" : false}

markdowntables#

Helps you work with tables

  • Install the extension via Command Palette (Ctrl+P) using ext install pharndt.vscode-markdown-table
Keybindings
Ctrl+Q Ctrl+Fformat table under cursor.
Ctrl+Q Spaceclear cell under cursor.
Ctrl+Q Ctrl+Qtoggle table mode
  • In table mode
Keybindings
Tabnavigate to the next cell in table
Shift+Tabnavigate to the previous cell in table
Alt+Numpad +Create new column left to the current position
Alt+Numpad -delete current column

rest-book#

When you write guides for cardano-wallet or other components with an API, you might want to include the response for a certain request in your guide. It can be useful not to leave the environment of your editor as to not loose focus or get distracted. rest-book allows you to execute HTTP requests within your editor.

  • Install the extension via Command Palette (Ctrl+P) using ext install tanhakabir.rest-book
  • Open or create a .restbook file to use the extension.