From 6be971da24285b696004ec3e95b3d2b2dcf36408 Mon Sep 17 00:00:00 2001 From: Vitaly Puzrin Date: Wed, 3 Sep 2014 01:05:23 +0400 Subject: [PATCH] Added demo stub and updated docs --- CHANGELOG.md | 4 + LICENSE | 22 ++++++ Makefile | 15 ++-- README.md | 19 ++++- demo/assets/index.css | 14 ++++ demo/assets/index.js | 8 ++ demo/data.yml | 107 +++++++++++++++++++++++++++ demo/index.html | 163 +++++++++++++++++++++++++++++++++++++++++ demo/index.jade | 49 +++++++++++++ dist/remarkable.js | 19 +++++ dist/remarkable.min.js | 2 + package.json | 1 + 12 files changed, 411 insertions(+), 12 deletions(-) create mode 100644 LICENSE create mode 100644 demo/assets/index.css create mode 100644 demo/assets/index.js create mode 100644 demo/data.yml create mode 100644 demo/index.html create mode 100644 demo/index.jade create mode 100644 dist/remarkable.js create mode 100644 dist/remarkable.min.js diff --git a/CHANGELOG.md b/CHANGELOG.md index e69de29..cf9245d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -0,0 +1,4 @@ +1.0.0 / WIP +----------- + +- First release. \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..1eb0054 --- /dev/null +++ b/LICENSE @@ -0,0 +1,22 @@ +Copyright (c) 2014 Jon Schlinkert, Vitaly Puzrin. + +Permission is hereby granted, free of charge, to any person +obtaining a copy of this software and associated documentation +files (the "Software"), to deal in the Software without +restriction, including without limitation the rights to use, +copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the +Software is furnished to do so, subject to the following +conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES +OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT +HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR +OTHER DEALINGS IN THE SOFTWARE. diff --git a/Makefile b/Makefile index 8935179..864fef2 100644 --- a/Makefile +++ b/Makefile @@ -12,15 +12,10 @@ CURR_HEAD := $(firstword $(shell git show-ref --hash HEAD | cut -b -6) master) GITHUB_PROJ := https://github.com//jonschlinkert/${NPM_PACKAGE} -help: - echo "make help - Print this help" - echo "make lint - Lint sources with JSHint" - echo "make test - Lint sources and run all tests" - echo "make browserify - Build browserified version" - echo "make dev-deps - Install developer dependencies" - echo "make gh-pages - Build and push API docs into gh-pages branch" - echo "make publish - Set new version tag and publish npm package" - echo "make todo - Find and list all TODOs" +demo: lint browserify + js-yaml demo/data.yml > demo/data.json + jade demo/index.jade -P --obj demo/data.json + rm -rf demo/data.json lint: @@ -83,5 +78,5 @@ todo: grep 'TODO' -n -r ./lib 2>/dev/null || test true -.PHONY: publish lint test dev-deps gh-pages todo +.PHONY: publish lint test dev-deps gh-pages todo demo .SILENT: help lint test todo diff --git a/README.md b/README.md index 8931087..bfb55f3 100644 --- a/README.md +++ b/README.md @@ -8,10 +8,11 @@ remarkable Markdown parser done right. Fast and easy to extend. -/DEMO LINK/ +[Live demo](http://jonschlinkert.github.io/remarkable/demo/) /INTRO/ + Install ------- @@ -27,6 +28,7 @@ bower: bower install remarkable --save ``` + Usage ----- @@ -41,7 +43,7 @@ console.log(md.parse('# Remarkable rulezz!')); You can define options via `set` method: ```javascript -var Remarkable = require('remarkable')(); +var Remarkable = require('remarkable'); var md = new Remarkable(); md.set({ @@ -55,3 +57,16 @@ md.set({ }); ``` + +Authors +------- + +- Jon Schlinkert [github/jonschlinkert](https://github.com/jonschlinkert) +- Alex Kocharin [github/rlidwka](https://github.com/rlidwka) +- Vitaly Puzrin [github/puzrin](https://github.com/puzrin) + + +License +------- + +[MIT](https://github.com/jonschlinkert/remarkable/blob/master/LICENSE) \ No newline at end of file diff --git a/demo/assets/index.css b/demo/assets/index.css new file mode 100644 index 0000000..eb475c0 --- /dev/null +++ b/demo/assets/index.css @@ -0,0 +1,14 @@ +.source, .result { + width: 100%; + height: 350px; +} + +.result { + border: 1px solid #ccc; + overflow: auto; +} + +.hljs { + background: none; + padding: 0 +} \ No newline at end of file diff --git a/demo/assets/index.js b/demo/assets/index.js new file mode 100644 index 0000000..6c0dffc --- /dev/null +++ b/demo/assets/index.js @@ -0,0 +1,8 @@ +hljs.initHighlightingOnLoad(); + +$(function() { + // highlight snippets + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); +}); \ No newline at end of file diff --git a/demo/data.yml b/demo/data.yml new file mode 100644 index 0000000..81e1ba8 --- /dev/null +++ b/demo/data.yml @@ -0,0 +1,107 @@ + +self: + demo1: + title: Simple markdown + description: | + That's a sample of typical `remarkable` use. You can play with content + code: | + var Remarkable = require('remarkable'); + + var md = new Remarkable({ + gfm: true, + tables: true, + breaks: false, + pedantic: false, + sanitize: true, + smartLists: true, + smartypants: false + }); + + console.log(md.parse('# Remarkable rulezz!')); + // =>

Remarkable rulezz!

+ source: | + # h1 Heading + ## h2 Heading + ### h3 Heading + #### h4 Heading + ##### h5 Heading + ###### h6 Heading + + Alt h1 Heading + ============== + + Alt h2 Heading + -------------- + + ## Horizontal Rules + + --- + + ___ + + + *** + + ## Text + + Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad. + + ## Emphasis + + __bold text__ + + _italicized text_ + + ~~strike through text~~ + + ## Blockquotes + + > Quoted text + >> Quotes can be nested + + ## Lists + + Unordered: + + * valid bullet + - valid bullet + + valid bullet + - Phasellus iaculis neque + - Purus sodales ultricies + + Ordered: + + 1. Lorem ipsum dolor sit amet + 2. Consectetur adipiscing elit + 3. Integer molestie lorem at massa + + ## Code + + This is `example of inline code`. + + Code block (with language name for highlighter) + + ``` javascript + var text = 'Remarkable is awesome!'; + + console.log(text); + ``` + + ## links + + [Basic link](https://github.com/jonschlinkert/remarkable) + + [Link with title](https://github.com/jonschlinkert/remarkable "Awesome markdown parser") + + demo2: + title: Code highlight + + # Advanced demos + + demo3: + title: Typograph + demo4: + title: Block macros + demo5: + title: Custom tag (lexer plugin) + diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..215b71a --- /dev/null +++ b/demo/index.html @@ -0,0 +1,163 @@ + + + + + + + + + + + + + +
+

remarkable demo

+

Basic examples

+

Simple markdown

+

That's a sample of typical `remarkable` use. You can play with content +

+

Show code

+ 
var Remarkable = require('remarkable');
+
+var md = new Remarkable({
+  gfm: true,
+  tables: true,
+  breaks: false,
+  pedantic: false,
+  sanitize: true,
+  smartLists: true,
+  smartypants: false
+});
+
+console.log(md.parse('# Remarkable rulezz!'));
+// => <h1>Remarkable rulezz!</h1>
+
+
+
+ +
+
+
+
+
+

Code highlight

+

Show code

+
+
+
+ +
+
+
+
+
+

Advanced examples

+

Typograph

+

Show code

+
+
+
+ +
+
+
+
+
+

Block macros

+

Show code

+
+
+
+ +
+
+
+
+
+

Custom tag (lexer plugin)

+

Show code

+
+
+
+ +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/demo/index.jade b/demo/index.jade new file mode 100644 index 0000000..9826b68 --- /dev/null +++ b/demo/index.jade @@ -0,0 +1,49 @@ +mixin sample(name) + - var s = self.self[name]; + h3= s.title + if s.description + p= s.description + p: a(data-toggle='collapse' href='#code-sample-' + name) Show code + + pre.collapse(id='code-sample-' + name) + code.js= s.code + + .row(id=name) + .col-xs-6 + textarea.source= s.source + section.col-xs-6 + .result + +doctype html +html + head + script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js') + + script(src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js') + link(rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css') + + script(src='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js') + link(rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css') + + script(src='../dist/remarkable.js') + + link(rel='stylesheet' href='./assets/index.css') + script(src='./assets/index.js') + + body + .container + h1 remarkable demo + + h2 Basic examples + + +sample('demo1') + +sample('demo2') + + h2 Advanced examples + + +sample('demo3') + +sample('demo4') + +sample('demo5') + + + diff --git a/dist/remarkable.js b/dist/remarkable.js new file mode 100644 index 0000000..a226ea3 --- /dev/null +++ b/dist/remarkable.js @@ -0,0 +1,19 @@ +/* remarkable 1.0.0 https://github.com//jonschlinkert/remarkable */!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.Remarkable=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o