Giter VIP home page Giter VIP logo

marked-gh-permalink's Introduction

marked-gh-permalink

This extension allows you to use GitHub permalink to code snippet in your markdown file, and it'll render just like how GitHub rendenrs code snippet from its repository, as long as

  1. You provide a GitHub access token.
  2. The token has access right to the repository your permalink points to.

Usage

Here we'll walk through how to try out this extension from scratch, this assumes you have the following:

  • installed node and npm
  • have a GitHub access token ready (since rendering the permalink requires fetching from GitHub API)

First we create a new directory, initialize npm and download marked and this extension (for npm init just hit defaults for everything it asks):

mkdir test
npm init -y
npm install marked marked-gh-permalink

Then we create a test file index.mjs with the following content:

import { marked } from 'marked';
import markedGhPermalink from 'marked-gh-permalink';

// Set up marked
const ghToken = process.env.GH_PERMALINK_API_TOKEN
marked.setOptions(marked.getDefaults());
marked.use(markedGhPermalink(ghToken));

// Example markdown text with permalink to GitHub code snippet
const input = `
This is how \`marked\` renders a code block:
https://github.com/markedjs/marked/blob/91ee15b2d43da92f751165c88d1a78ebc3b99114/src/Renderer.ts#L17-L33
`

// Convert to html and print it out.
const result = await marked(input);
console.log(result);

Finally we run it with our github token:

GH_PERMALINK_API_TOKEN=<fill-in-your-token> node index.mjs

Finally, you'll see the HTML printed in your terminal. If you copy and paste that to html code editer, you'll see this: raw html

Note that it doesn't have syntax highlighting, that's because we use highlight.js for that and it requires importing CSS separately. So if we add the following line to the beginning of the HTML we had:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">

We get the github-style syntax highlighting, as shown below: styled html

marked-gh-permalink's People

Contributors

strongerxi avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.