Skip to main content

Docusaurus Tips

note

This is a temporary page to capture notes for editing and using Docusaurus and Markdown. Delete this before final publish

GUIDES​

All about using and publishing with Docusaurus and Markdown

Docusaurus Guides​

Markdown Cheat Sheet​

DOCUSAURUS DEV TIPS​

Adding images to a page​

Placing inline images uses the following syntax:

# code block
![Example banner](/img/name-of-image.png)

This is a root-relative path (local). Use it with images that are in the website folder. The baseUrl is applied to it by Docusaurus. You can copy the tag and replace the image file name with yours.

This method works on local sites and when published to the server.

Here is the social card using a local path:

Example banner

Placing external images uses this syntax:

# code block
![Example banner](https://placehold.co/1280x720)

Here is an external image using an absolute path: Example banner

Using HTML image tag for Height and Width​

note

  1. Dimas' suggestion for using HTML img tag is shown below, which allows Height and Width, & we can bypass extra code monkey-ing in Markdown for the same support.

  2. Note that in Docusaurus, an HTML img tag has to be closed like a break tag, where there is a space and trailing slash before the closing bracket. Markup examples are below.

  3. There is also an issue where relative HTML image paths do not get pre-pended with a BaseURL like in Markdown, so I suggest using absolute paths, which we had discussed doing in any case for production.

Here is a test of a straight image tag using inline HTML. The source image is 1200 x 675, I have height and width tags non-proportional at 200 x 600 to check that it adjust size as expected.

# code block
<img src="https://mightydev.sirv.com/nooz/documentation/noozroom-social-card.jpg" height="200" width="600"/>

Same image with tags set at 50%.

# code block
<img src="https://mightydev.sirv.com/nooz/documentation/noozroom-social-card.jpg" height="50%" width="50%"/>

Custom social cards​

Add custom cards to specific pages by editing the front matter (and creating a graphic, ofc):

# code block
---
title: Page Title
description: Page description
slug: page-slug
tags:
  [
    some, tags
  ]
image: https://i.imgur.com/mErPwqL.png
---

# Page Title

Hello world

See original StackExchange article

UTF-8 Icons​

UTF-8 icons are a standard set of icons that can be used in markup Reference page