How To Markdown

This website is based on the docusaurus framework, that uses Markdown with JavaScript (JSX). The most important and used components are explained below. More information about Markdown in docusaurus can be found here.

New Page#

  • use .mdx as filename ending in GitHub
  • After you have inserted a new page, add it to the TOC (table of contents) so that it will be visible on the page.
  • Insert at the top of every page:
---
id: videos_eln
sidebar_label: Videos
slug: videos_eln
title: Introduction Videos
---

id: The unique document id. By default, a document id is the name of the document (without the extension) relative to the root docs directory. It can be used in the left TOC.
sidebar_label: Name displayed in the table of content (TOC).
slug: Optional. Defines the last part of the URL.
title: Optional. Prompted on the page.

Markdown#

Buttons#

with Icon#

For icon buttons the library Font Awesome is used. Get icons from here: https://fontawesome.com/ and import them in the page together with a button function. The color palette is from the Infima library.

import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { Btn } from '../btn.js'
<Btn icon={faPlus} color={"success"}/>

with multiple Icons#

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus, faShareAlt } from '@fortawesome/free-solid-svg-icons'
<button className={"button button--sm button--success"} style={{padding:"0.5rem"}}>
<FontAwesomeIcon icon={faPlus} size="lg"/>
<FontAwesomeIcon icon={faShareAlt} size="lg"/>
</button>

with Icon and Text#

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
<button className={"button button--sm button--success"} style={{padding:"0.5rem"}}>
Add analysis <FontAwesomeIcon icon={faPlus} size="lg"/>
</button>

with Text#

<button className="button button--sm button--warning">Update</button>

change size of button#

You can change the size of a button in its style attribute with values in %, pixel (px), rem or em.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus, faShareAlt } from '@fortawesome/free-solid-svg-icons'
<button className={"button button--sm button--success"} style={{padding:"0.5rem", height: "50%", width: "50%"}}>
<FontAwesomeIcon icon={faPlus} size="lg"/>
</button>
<button className={"button button--sm button--success"} style={{padding:"0.5rem", height: "5px", width: "5px"}}>
<FontAwesomeIcon icon={faPlus} size="lg"/>
</button>

Headings#

To create a heading, add number signs # in front of a word or phrase. The number of # you use should correspond to the heading level. A lot of # indicates a low level.

Images#

Images can be inserted as Markdown or as HTML for special configurations (resizing etc.) or if the image is inside an HTML tag:

![Management Level Button](/img/mgmt_level_btn.png)
<img src={"/chemotionsaurus/img/mgmt_level_btn.png"} width={"20px"} alt={"Management Level Button"}/>

There should be no /static in src.

Info Boxes#

Highlighted info boxes (like in the eln intro page) with further informations are called "Admonitions" in docusaurus. See here.

Line Breaks#

Insert two white spaces at the end of the line.

Links#

[alt tag](link)

extern#

[www.chemotion.net](http://www.chemotion.net)

intern#

link to another page in the docu:

[Instructions for ELN](./eln/intro.mdx)

link to another chapter in the same page with the last segement of the URL:
e. g. URL: eln.chemotion.net/chemotionsaurus/docs/instructions #toc

[link to TOC](#toc)

Lists#

ordered#

random number with a dot

1. text
1. text1
1. text2
  1. text
  2. text1
  3. text2

unordered#

* text
- text1
  • text
  • text1

Table#

| header 1 | header 2 |
|---|---|
| field 1 | field 2 |

Text Formatting#

bold

**bold**
<b>bold</b>

highlight elements, e. g. UI elements

`Collection Bar`

TOC#

The TOC on the left of every documentation page must be manual updated via sidebars.js on GitHub. If you have inserted a new page or want to change the order, change it here.