Markdown component

The Markdown component renders markdown content that is passed to it.

Installation

Install the component with the following command.

bash
npm i @anakin-gbit/markdown@latest

For syntax highlighting you must include a Highlight.js theme manually in your project, eg. in the root layout.tsx.

tsx
import 'highlight.js/styles/github.css'

Example Usage

tsx
<Markdown>{
  `# H1 heading
  Markdown content goes here!`
}</Markdown>

Reading from a file

This example (this page) fetches content from a flat file.

tsx
import React from 'react'
import fs from 'fs'
import path from 'path'
import { fileURLToPath } from 'url'
import Markdown from '@/components/Markdown'

const MarkdownDocs = () => {
  const currentDir = path.dirname(fileURLToPath(import.meta.url))
  const guideFilePath = path.join(currentDir, './guide.md')
  const guide = fs.readFileSync(guideFilePath, 'utf-8')

  return <Markdown>{guide}</Markdown>
}

export default MarkdownDocs

Markdown reference

The remainder of this document is intended as a reference guide for writing markdown that will be supported by the Markdown component. It covers most commonly used elements, but others may also be supported by the Markdown component, which uses ReactMarkdown under the hood.

Comments

HTML-style comments do not appear in the rendered output.

markdown
<!-- This is a comment and won't be rendered in the output. -->
This text **will** be rendered.

This text will be rendered.

Headings (using '#')

Headings are written with repeated # to indicate the level.

markdown
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

Headings (using underlining)

Alternatively, for H1 and H2, equals signs or hyphens can be used to indicate a heading:

markdown
H1 heading
======

H2 heading
------

H1 heading

H2 heading

Inline code

markdown
Single `backticks` indicate inline code and are returned as `<code>backticks</code>`.

Single backticks indicate inline code and are returned as <code>backticks</code>.

Block code

Use triple backticks for a code block, optionally specifying the language after the opening backticks.

markdown
```sql
select * from orders
```
sql
select * from orders
javascript
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('World'));
python
def greet(name):
    return f"Hello, {name}!"
print(greet("World"))
html
<!DOCTYPE html>
<html>
<head>
  <title>Sample Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>
css
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: #333;
}
bash
#!/bin/bash

# Print "Hello, World!"
echo "Hello, World!"

# List files in the current directory
ls -la
csharp
using System;

class Program {
    static void Main() {
        Console.WriteLine("Hello, World!");
    }
}

Emphasis

Bold, Italic, and Strikethrough:

markdown
**This is bold text**
__This is bold text__

*This is italic text*
_This is italic text_

_**If you need both bold and italic, use both underscores and asterix**_

~~This is Strikethrough~~

This is bold text This is bold text

This is italic text This is italic text

If you need both bold and italic, use both underscores and asterix

This is Strikethrough

To Do

Other markdown syntax is also supported, including the following, which are yet to be added to this documenattion:

  • Lists
  • Ordered
  • Unordered
  • Tasks
  • Ignoring Markdown formatting
  • Links
  • Inline
  • Inline with title
  • Reference style
  • Images
  • Footnotes
  • Tables
  • Blockquotes
  • Inline HTML
  • Horizontal Rules