GithubHelp home page GithubHelp logo

meatball084 / charmd Goto Github PK

View Code? Open in Web Editor NEW

This project forked from littletof/charmd

0.0 0.0 0.0 320 KB

A simple, extendable markdown renderer for your terminal.

TypeScript 13.40% JavaScript 86.60%

charmd's Introduction

๐ŸŽฉ charMD

deno badge

A simple, extendable markdown renderer for your terminal.

๐Ÿšง This module is in early developement, expect breaking changes ๐Ÿšง

charMD enables you to render a markdown text into a string, which printed in the terminal provides a well formatted output, instead of plain text.

Showcase

Try it out

To see the general capabilities of this module run:

deno run https://deno.land/x/charmd/example.ts

To see, how a specific markdown gets rendered run:

deno run --allow-read https://deno.land/x/charmd/example.ts ./README.md

Usage

Simply import the module and call the renderMarkdown method with your markdown text.

import { renderMarkdown } from 'https://deno.land/x/charmd/mod.ts';

console.log(renderMarkdown('# Hello world ๐ŸŒ!'));

๐Ÿงฉ Extensions

The module provides a way to extend it functionality with additional extensions, which can be provided in it's options param.

An extension can implement any of the Extension interface's methods, which are:

  • init: Called before AST generation, if a string is returned, it will override the input markdown for later extension's init fn and processing steps.
  • postAST: Called with the generated AST's root node, before any transformations
  • transformNode: Called with each node to do modifications on the node and it's children in the AST.
  • postTransform: Called with root, after all the transformations ran for all nodes.
  • generateNode: Called with each node. It should return the string representation of the rendered node,if the extension handles that specific node, or void, if its not handled by the extension.
  • postGenerate: Called after the string representation is created.

A simple extension, that renders link with green and blue instead of the built-in cyan would look something like this:

const LinkExt = {
    generateNode(genFn, node: Node, parent: Node, options: Options) {
          if(node.type === 'link') {
            const linkText = node.children?.map(ch => genFn(ch, node, options)).join('') || '';
            const link = `Link with text '${colors.blue(linkText)}' points to ${colors.cyan(node.url!)}`
            return colors.green(link);
          }
      }
}

console.log(renderMarkdown(
    '[charMD](https://github.com/littletof/charmd)',
    { extensions: [LinkExt] }
));

Direct use - cli.ts

For direct use in the terminal run cli.ts:

deno run --allow-net https://deno.land/x/charmd/cli.ts -r https://raw.githubusercontent.com/denoland/deno/master/README.md

Or install it with deno install

It has three options:

  • -s for rendering a string directly: -s "# markdown string"
  • -l for rendering a local file: -l ./README.md
  • -r for rendering a remote file: -r https://raw.githubusercontent.com/denoland/deno/master/README.md

Permissions

The module itself requires no permissions to run.

If --unstable is provided, horizontal separators will consider the terminal's width.

Limitations

  • No syntax highlight
  • No ~~strikethrough~~ or underline
  • No multiline tables cells
  • Possible hiccups with more complex markdowns

These could change in the future, but the aim is to keep the module's complexity minimal.

Also, many of these should also be solvable using extensions.

Notes

  • The main functions are also exported from the module, so for example you can use the toAST function to get your ast for the markdown and process it yourself.

  • As its core, it currently uses mdast-util-from-markdown, to get the AST, you can also provide extensions to it in the options unstable mdast property.

  • This module's core structure draws from @dephraims work with https://github.com/dephraiim/termd.

Contributions

Feedback and contributions are always welcome. Open an issue or a PR, or contact me on the Deno discord.

TODO

  • fix lists
  • remove dots from codeblock backgrounds
  • links with images
  • # Header with *italic*
  • tests
  • fmt, lint
  • strikethrough, underline and combinations
  • Look into alternatives for the AST generation.

charmd's People

Contributors

littletof 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.