Code Monkey home page Code Monkey logo

lit-markdown's Introduction

lit-markdown

es6 literal markdown parser

Code

function markdown(strings, ...values) {
  function para(text, line) {
    const trimmed = line.trim()
    if (/^<\/?(ul|ol|li|h|p|bl)/i.test(trimmed)) {
      return `\n${line}\n`
    }
    return `\n<p>${trimmed}</p>\n`
  }

  function ulList(text, item) {
    return `\n<ul>\n\t<li>${item.trim()}</li>\n</ul>`
  }

  function olList(text, item) {
    return `\n<ol>\n\t<li>${item.trim()}</li>\n</ol>`
  }

  function blockquote(text, tmp, item) {
    return `\n<blockquote>${item.trim()}</blockquote>`
  }

  function header(text, chars, content) {
    const level = chars.length
    return `<h${level}>${content.trim()}</h${level}>`
  }

  return [
    { regex: /(#+)(.*)/g, replacement: header }, // headers
    { regex: /!\[([^\[]+)\]\(([^\)]+)\)/g, replacement: "<img src='$2' alt='$1'>" }, // image
    { regex: /\[([^\[]+)\]\(([^\)]+)\)/g, replacement: "<a href='$2'>$1</a>" }, // hyperlink
    { regex: /(\*\*|__)(.*?)\1/g, replacement: '<strong>$2</strong>' }, // bold
    { regex: /(\*|_)(.*?)\1/g, replacement: '<em>$2</em>' }, // emphasis
    { regex: /\~\~(.*?)\~\~/g, replacement: '<del>$1</del>' }, // del
    { regex: /\:\"(.*?)\"\:/g, replacement: '<q>$1</q>' }, // quote
    { regex: /`(.*?)`/g, replacement: '<code>$1</code>' }, // inline code
    { regex: /\n\*(.*)/g, replacement: ulList }, // ul lists
    { regex: /\n[0-9]+\.(.*)/g, replacement: olList }, // ol lists
    { regex: /\n(&gt;|\>)(.*)/g, replacement: blockquote }, // blockquotes
    { regex: /\n-{5,}/g, replacement: '\n<hr />' }, // horizontal rule
    { regex: /\n([^\n]+)\n/g, replacement: para }, // add paragraphs
    { regex: /<\/ul>\s?<ul>/g, replacement: '' }, // fix extra ul
    { regex: /<\/ol>\s?<ol>/g, replacement: '' }, // fix extra ol
    { regex: /<\/blockquote><blockquote>/g, replacement: '\n' } // fix extra blockquote
  ].reduce((text, rule) => text.replace(rule.regex, rule.replacement),
    
    (Array.isArray(strings) ? strings : [strings])
      .map((part, index) => `${part}${values[index] ? values[index] : ''}`)
      .join(''))
}

usage

markdown`
# Header

This is a test.`

lit-markdown's People

Contributors

reimertz avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Forkers

hejrobin roadlabs

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.