Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes.

Overview

render-gfm

Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes.

See Example

This version is rendered Markdown, through GitHub Pages alone.

This version is rendered Markdown, using render-gfm.

Install

npm install -g render-gfm

The --global option (-g) is required to globally use the CLI.

This package was written using other packages which were written as ES Modules, causing this to be in ESM as well. See this gist by @sindresorhus for more info.

Usage

Render-gfm can be used programmatically with Javascript, or it can be used at the command line.

API

Import (ESM)

import render from 'render-gfm';

// Using functions other than `render()`:
import { returnRenderedMarkdown(), generateCSS(), writeMarkdown(), writeCSS() } from 'render-gfm';

Usage

/* Examples */

const html = await returnRenderedMarkdown({ file: '../src/README.md', mode: 'gfm' });
// => <Promise<string>> Returns the rendered Markdown in HTML

const themes = await generateCSS();
// => <Promise<Object<string>>> Returns the CSS for each theme, inside an object

await writeMarkdown({ file: 'C:/Users/Owner/Desktop/Project/README.md', mode: 'gfm', output_dir: 'C:/Users/Owner/Desktop/Project/dist' });
// => <Promise<string>> Renders a Markdown file and writes it to an HTML file, then returns directory path to it

await writeCSS({ output_dir: 'C:/Users/Owner/Desktop/Project/assets/css' });
// => <Promise<string>> Generates and writes the CSS for each of GitHub's themes, then returns the path to the CSS files

await render({ file: 'C:/Users/Owner/Desktop/Project/README.md', mode: 'gfm', output_dir: 'C:/Users/Owner/Desktop/Project/dist' });
// => <Promise<string>> Generates CSS and renders Markdown, then writes everything to an output directory

CLI

Assuming render-gfm was installed globally with npm install -g render-gfm, you should now be able to use it from anywhere with your command line.

# Render Markdown and generate CSS
gfm --help

# Only render a Markdown file
gfm markdown --help

# Only generate the CSS
gfm themes --help

# Example - Render a Markdown file and generate CSS, to the output folder "dist" in the current directory
gfm README.md -o dist
# or another example (both relative and absolute paths are allowed)
gfm C:/Users/Owner/Desktop/Project/README.md -o ../dist

Website

To-do

I'll also put this renderer up as a website, to quickly and easily render your Markdown.

License

Copyright © 2022 Shaun Bharat.

This project is licensed with the MIT license.

You might also like...

Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites and experiences.

Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites and experiences.

A powerful, flexible, Markdown-based authoring framework. Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites and

Jan 2, 2023

Highlighting the best apps and builders on the Farcaster community.

Highlighting the best apps and builders on the Farcaster community.

FarApps Highlighting the best apps and builders on the Farcaster community. Getting Started This project uses Next.js. Install dependencies and run th

Dec 30, 2022

An obsidian plugin for uploading local images embedded in markdown to remote store and export markdown for publishing to static site.

An obsidian plugin for uploading local images embedded in markdown to remote store and export markdown for publishing to static site.

Obsidian Publish This plugin cloud upload all local images embedded in markdown to specified remote image store (support imgur only, currently) and ex

Dec 13, 2022

A Bower wrapper for @bartaz modification to the jQuery Term Highlighting plugin.

jQuery.Highlight.js Text highlighting plugin for jQuery. Original code and documentation. Install API Examples Attribution Install How to use this plu

Dec 30, 2022

A lib for text highlighting by using Canvas.

canvas-highlighter 基于 canvas 实现的文本划词高亮,与文本展示的结构完全解耦,不改变文本内容的 DOM 结构。 Installation npm install canvas-highlighter Usage 最简单的实现文本划词直接高亮 import CanvasHig

Dec 24, 2022

A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that uses markdown-it.

markdown-it-eleventy-img A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that use markdown-it. F

Dec 20, 2022

Markdown Transformer. Transform markdown files to different formats

Mdtx Inspired by generative programming and weed :). So I was learning Elm language at home usually in the evening and now I am missing all this gener

Jan 2, 2023

Powershell scripts and Update script for Powershell configs and oh-my-posh themes

windows-powershell-autoconfig What is it? It is a NodeJS Project which updates your powershell and oh-my-posh scripts. Why should I use it? It is very

Dec 28, 2022

Collection of customizable Anki flashcard templates with modern and clean themes.

Collection of customizable Anki flashcard templates with modern and clean themes.

Anki Templates Collection of customizable Anki flashcard templates with modern and clean themes. About Features Themes Instructions Add-on support Com

Dec 29, 2022
Comments
  • Hello!

    Hello!

    Might be a long shot here - but assuming you would be interested in contributing to Markdown Tag?

    Tho we would be not using the API to get Markdown. Looking forward to getting in touch if interested! Feel free to drop contact details or even open up a repo & invite me in their and we can chat via issues in their to avoid spam in this repo (my apologizes).

    opened by MarketingPip 6
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump got from 11.8.3 to 11.8.5

    Bump got from 11.8.3 to 11.8.5

    Bumps got from 11.8.3 to 11.8.5.

    Release notes

    Sourced from got's releases.

    v11.8.5

    https://github.com/sindresorhus/got/compare/v11.8.4...v11.8.5

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • To-Do: Only render Markdown files by default

    To-Do: Only render Markdown files by default

    Using just gfm <file> -o <output> should only render just the Markdown file, since the CSS usually only needs to be generated once (through gfm themes).

    Doing this makes more sense because rendering multiple Markdown files is more common than generating the same CSS files over again.

    opened by shaunbharat 0
Releases(v1.0.2)
A refined tool for exploring open-source projects on GitHub with a file tree, rich Markdown and image previews, multi-pane multi-tab layouts and first-class support for Ink syntax highlighting.

Ink codebase browser, "Kin" ?? The Ink codebase browser is a tool to explore open-source code on GitHub, especially my side projects written in the In

Linus Lee 20 Oct 30, 2022
A plugin for the Obsidian markdown note application, adding functionality to render markdown documents with multiple columns of text.

Multi-Column Markdown Take your boring markdown document and add some columns to it! With Multi Column Markdown rather than limiting your document lay

Cameron Robinson 91 Jan 2, 2023
Syntax highlighting, like GitHub

Close up of The Starry Night by Vincent van Gogh (1889) with examples of starry-night over it starry-night Syntax highlighting, like what GitHub uses

Titus 585 Dec 21, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Svelte component to render markdown.

svelte-exmarkdown Svelte component to render markdown. Motivation svelte-markdown is a good component package. However, it is not extensible. You cann

Sotaro Tommykawa 43 Jan 6, 2023
Render arbitrary Markdown content in Astro, optionally integrating with any existing configuration.

Astro Markdown Astro Markdown lets you render arbitrary Markdown content in Astro, optionally integrating with any existing configuration. --- import

Astro Community 14 Dec 22, 2022
🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons

IconPark English | 简体中文 Introduction IconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icon

Bytedance Inc. 6.8k Jan 5, 2023
jQuery Tabs Plugin. CSS Tabs with Accessible and Responsive Design. Lot of Tab Themes with Vertical and Horizontal Orientation.

Macaw Tabs Macaw Tabs is jQuery tabs plugin. It helps you to create accessible and responsive jQuery tabs by implementing the W3 design patterns for t

HTMLCSSFreebies 6 Dec 8, 2022