Code Monkey home page Code Monkey logo

grunt-markdown's Introduction

grunt-markdown

Build Status

This grunt task takes a set of markdown files and converts them to HTML. It supports GFM with code highlighting. The code highlighting is done using highlight.js.

Getting Started

Install this grunt plugin next to your project's grunt.js gruntfile with:

npm install grunt-markdown --save-dev

Then add this line to your gruntfile:

grunt.loadNpmTasks('grunt-markdown');

Documentation

Creating a markdown task is simple. For the basic functionality add the following config in your gruntfile:

grunt.initConfig({
  markdown: {
    all: {
      files: [
        {
          expand: true,
          src: 'docs/src/*.md',
          dest: 'docs/html/',
          ext: '.html'
        }
      ]
    }
  }
});

Here is an example config using all of the options:

grunt.initConfig({
  markdown: {
    all: {
      files: [
        {
          expand: true,
          src: 'docs/src/*.md',
          dest: 'docs/html/',
          ext: '.html'
        }
      ],
      options: {
        template: 'myTemplate.jst',
        preCompile: function(src, context) {},
        postCompile: function(src, context) {},
        templateContext: {},
        markdownOptions: {
          gfm: true,
          highlight: manual,
          codeLines: {
            before: '<span>',
            after: '</span>'
          }
        }
      }
    }
  }
});

These are the properties that the markdown task accepts:

  • files: This plugin supports use of the files API introduced in Grunt 0.4.0. Files may be specified using any one of the Compact Format, Files Objects Format, or Files Array Format (as in the above example).
  • options: options to be passed to the markdown parser
    • template: If you wish to specify your own html template, use the template option. Include the following line: <%=content%> where you want the compiled markdown inserted in your template
    • markdownOptions: Options passed directly to the markdown parser.
    • preCompile: is run before the markdown is compiled
    • postCompile: is run after the markdown has been compiled
    • templateContext: the default context for template expansion

modifying content with preCompile and postCompile

Sometimes there is a need to modify the markdown content prior to compilation. This is most commonly used to augment the template context with meta data before expanding the html template.

preCompile

This function is run prior to the compilation of md to html. It has the following format:

  function(src, context) {
    //do stuff to src and context
    //optionally return the modified src
  }

postCompile

This function is run after the md has been converted to html. It has the following format:

  function(src, context) {
    //do stuff to src and context
    //optionally return the modified src
  }

templateContext

This object is used to expand your html template. Any data added to this object will be available in the template using the template syntax <%=myAttr%>.

This can also be a function which is expected to return a context object.

markdownOptions

Most markdown options are passed as-is to the marked markdown parser. The only option that is processed prior to compiling the markdown is the highlight option. If you specify auto or manual the task will handle highlighting code blocks for you use highlight.js. If you pass a custom function as the highlight option it will be used to highlight the code.

  • auto: Will try to detect the language
  • manual: will pass the language name from markdown to the highlight function
  • codeLines: specify text that should wrap code lines

License

Copyright (c) 2012 James Morrin Licensed under the MIT license.

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.