HOW TO USE SIMPLYMARKDOWN IN YOUR FRONTEND OR BACKEND

Index

English

simply-markdown-ts

simply-markdown-ts is a lightweight and easy-to-use library to render markdown into HTML. It is an excellent alternative to heavier libraries, offering the essential features for blogs, documentation, and personal projects.

Installation

To use simply-markdown-ts in your project, you can import it directly from JSR:

import { render } from 'jsr:@sonickseven/simply-markdown';

Usage

The render function is the entry point of the library. It takes a markdown string and returns the corresponding HTML.

import { render } from 'jsr:@sonickseven/simply-markdown';

const markdown = `# Hello, world!

This is a paragraph with **bold** and *italic* text.

- List item 1
- List item 2

[Visit my website](https://sonickseven.deno.dev)
`;

const html = render(markdown, {
  disableUrlIndex: true,
});
console.log(html);

Features

Headers: Supports headers from # (H1) to ###### (H6).
Text formats: Bold (text), italic (text), and strikethrough (text).
Links: Create links with <a href="url">title</a>.
Images: Embed images with <img src="url" alt="alt">.
Lists: Ordered (1.) and unordered (-, *, +) lists.
Blockquotes: Create blockquotes with >.
Code: Inline (code) and block (```) code.
Tables: Create tables with markdown syntax.
Horizontal rules: Create horizontal rules with ---, *, or _.

API

`render(markdown: string, options?: renderTypes): string`

markdown: The markdown string to be rendered.
options: (Optional) An object with rendering options.

Returns the rendered HTML as a string.

`CSS: string`

A string with the default CSS to style the rendered HTML. You can include it in your project to get a default style.

import { CSS } from 'jsr:@sonickseven/simply-markdown';

const style = document.createElement('style');
style.textContent = CSS;
document.head.appendChild(style);

Use with Prism

This library works seamlessly with Prism, a popular syntax highlighter, allowing you to format code blocks in multiple languages (TypeScript, JavaScript, Rust, Python, etc.).

📚 Review all supported Prism languages here

Example Integration

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown with Syntax Highlighting</title>

    <!-- Prism CSS Theme -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"
    />

    <!-- Load Prism.js with more language support -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-rust.min.js"
    ></script>
  </head>
  <body>
    <div id="markdown-content"></div>

    <script type="module">
      import {
        clipBoard,
        CSS,
        render,
      } from 'https://esm.sh/jsr/@sonickseven/simply-markdown';

      const text_md = `# Hello, mundo!

This is a paragraph with **bold** and *italic* text.

## Code Example

\`\`\`typescript
function greet(name: string): string {
    return \`Hello, \${name}!\`;
}

console.log(greet("World"));
\`\`\`

---

\`\`\`rust
fn greet(name: string) -> string {
    format!("Hello {}", name)
}

println!(greet("World"));
\`\`\`

---

- List item 1
- List item 2

[Visit my website](https://sonickseven.deno.dev)`;

      document.addEventListener('DOMContentLoaded', async () => {
        await new Promise((resol) => setTimeout(resol, 1000));

        const style = document.createElement('style');
        style.textContent = CSS;
        document.head.appendChild(style);

        const contentElement = document.getElementById('markdown-content');
        contentElement.innerHTML = render(text_md);

        const script = document.createElement('script');
        script.textContent = clipBoard;
        document.body.appendChild(script);

        if (window.Prism) {
          Prism.highlightAllUnder(contentElement);
        }
      });
    </script>
  </body>
</html>

Contributing

Contributions are welcome. If you find a bug or want to suggest a new feature, please open an issue on GitHub.

License

simply-markdown-ts is licensed under the MIT License.

If you want more information visit this project 😉