Code Monkey home page Code Monkey logo

extended-markdown-filter's Introduction

extended-markdown-filter

Extended Markdown filters for the HTML::Pipeline.

Build Status

Installation

Add this line to your application's Gemfile:

gem 'extended-markdown-filter'

And then execute:

$ bundle

Or install it yourself as:

$ gem install extended-markdown-filter

Usage

The simplest way to do this is

require 'extended-markdown-filter'

Then just use the HTML pipeline normally. With Jekyll, this is meant to be used with another plugin in conjunction, https://github.com/gjtorikian/jekyll-html-pipeline.

A minimum config file might look like:

gems:
  - extended-markdown-filter
  - jekyll-html-pipeline

markdown: HTMLPipeline
html_pipeline:
  filters:
    - "ExtendedMarkdownFilter"
  context:
    emf_use_blocks: true

Within Jekyll

Because of the Liquid template engine, if you use this filter with Jekyll, you might find that your curly brace tags--such as {{#tip}}--disappear.

You'll need to pass the context emf_use_blocks through your filter. This sets up a totally safe monkey-patch to convert the {{ }} blocks into [[ ]], so that Liquid ignores them. Then, this renderer will convert the Markdown appropriately.

What does this add?

You may be wondering what features this filter adds to Markdown. Great question! Here's what we've got:

Command-line highlighting

A new pre block, command-line, adds some divs to allow for better highlighting for terminal code.

Example

``` command-line
$ git remote add origin https://github.com/<em>user</em>/<em>repo</em>.git
# Set a new remote
> origin  https://github.com/user/repo.git
```
  • $ represents content a user enters
  • <em> highlights content for the user
  • # represents comments
  • > represents output as a result of a command

Helper

The helper notation wraps content in an accordion fold.

Example

``` helper
I'm not really important enough to show.
```

Admonition blocks

You can create separate, priority-colored callouts with {{#tip}}, {{#note}}, {{#warning}}, and {{#error}} tags.

Example

{{#tip}}

Here's a hot tip: **line one**
Here's a hot tip: line two

{{/tip}}

{{#note}}

You should probably know this! line one
You should probably know this! line two

{{/note}}

{{#warning}}

Yo, check this out: line one
Yo, check this out: line two

{{/warning}}

{{#danger}}

Sheeeeit, this is a problem: ~~line one~~
Sheeeeit, this is a problem: line two

{{/danger}}

Intro

The intro block demarcates a special section that provides a summary of the content to follow.

Example

{{#intro}}

[Gists](https://gist.github.com) are a great way to share your work. You can share single files, parts of files, or full applications.

{{/intro}}

Octicon

The {{ octicon }} helper lets you easily render any Octicon in the content, including an aria label.

Example

{{ octicon-gear The Settings gear }}

Operating system blocks

Sometimes, certain content needs to be rendered for only a certain operating system. Use {{#mac}} of Mac OS specific content, {{#windows}} for Windows, {{#linux}} for Linux, and {{#all}} as a catch-all for everything else.

Example

{{#mac}}

1. Command-click on the option.

{{/mac}}

{{#windows}}

1. Right click on the **Start** menu.

{{/windows}}

{{#linux}}

1. Open the terminal.

{{/linux}}

{{#all}}

1. Double-click on the icon.

{{/all}}

extended-markdown-filter's People

Contributors

gjtorikian avatar bernars avatar risu-kun avatar nicolasleger avatar lowply 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.