diff --git a/demo/assets/index.css b/demo/assets/index.css index eb475c0..6b52927 100644 --- a/demo/assets/index.css +++ b/demo/assets/index.css @@ -1,14 +1,74 @@ -.source, .result { +body { + margin-bottom: 20px; + overflow: hidden; +} + +.source, .result, .result-text { width: 100%; height: 350px; } .result { - border: 1px solid #ccc; + padding-right: 20px; overflow: auto; } +.result-text { + display: none; +} +.result-text-data { + white-space: pre; +} + +.result-as-text .result-text { + display: block; +} +.result-as-text .result { + display: none; +} + +.mode { + position: absolute; + right: 15px; + top: 0; + padding: 0 10px; + font-weight: bold; + font-size: 12px; + background-color: #666; + color: #fff !important; +} + .hljs { background: none; padding: 0 -} \ No newline at end of file +} + +.gh-ribbon { + display: block; + position: absolute; + right: -60px; + top: 44px; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + width: 230px; + z-index: 10000; + white-space: nowrap + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + background-color: #686868; + box-shadow: 0 0 2px rgba(102, 102, 102, 0.4); + padding: 1px 0; +} +.gh-ribbon a, .gh-ribbon a:hover { + text-decoration: none; +} +.gh-ribbon a { + border: 1px solid #ccc; + color: #fff; + display: block; + font-size: 13px; + font-weight: 700; + outline: medium none; + padding: 4px 50px 2px; + text-align: center; +} diff --git a/demo/assets/index.js b/demo/assets/index.js index 6c0dffc..0cbd067 100644 --- a/demo/assets/index.js +++ b/demo/assets/index.js @@ -1,8 +1,32 @@ -hljs.initHighlightingOnLoad(); - $(function() { // highlight snippets - $('pre code').each(function(i, block) { + $('pre.code-sample code').each(function(i, block) { hljs.highlightBlock(block); }); -}); \ No newline at end of file +}); + +var md = new window.Remarkable({ + html: true, + xhtml: true, + breaks: false, + langprefix: 'language-' +}); + +md.renderer.rules.table_open = function () { + return '\n'; +} + + +function updateResult() { + var result = md.render($('#demo1 .source').val()); + $('#demo1 .result').html(result); + $('#demo1 .result-text-data').text(result); +} + +$('#demo1 .source').on('keyup paste cut mouseup', updateResult); +$('#demo1 .mode').on('click', function (event) { + $('#demo1').toggleClass('result-as-text'); + event.preventDefault(); +}); + +updateResult(); \ No newline at end of file diff --git a/demo/data.yml b/demo/data.yml index 81e1ba8..f5883dc 100644 --- a/demo/data.yml +++ b/demo/data.yml @@ -8,13 +8,10 @@ self: var Remarkable = require('remarkable'); var md = new Remarkable({ - gfm: true, - tables: true, + html: true, + xhtml: true, breaks: false, - pedantic: false, - sanitize: true, - smartLists: true, - smartypants: false + langprefix: 'language-' }); console.log(md.parse('# Remarkable rulezz!')); diff --git a/demo/index.html b/demo/index.html index 215b71a..178313d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -8,26 +8,18 @@ -

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 Remarkable = require('remarkable');
 
 var md = new Remarkable({
-  gfm: true,
-  tables: true,
+  html: true,
+  xhtml: true,
   breaks: false,
-  pedantic: false,
-  sanitize: true,
-  smartLists: true,
-  smartypants: false
+  langprefix: 'language-'
 });
 
 console.log(md.parse('# Remarkable rulezz!'));
@@ -109,55 +101,13 @@ console.log(text);
 [Link with title](https://github.com/jonschlinkert/remarkable "Awesome markdown parser")
-
-
-
- -

Code highlight

-

Show code

-
-
-
- -
-
-
-
-
-

Advanced examples

-

Typograph

-

Show code

-
-
-
- -
-
-
-
-
-

Block macros

-

Show code

-
-
-
- -
-
-
-
-
-

Custom tag (lexer plugin)

-

Show code

-
-
-
- -
-
+
html / source
+
+
Fork me on GitHub
+ \ No newline at end of file diff --git a/demo/index.jade b/demo/index.jade index 9826b68..77a8eb3 100644 --- a/demo/index.jade +++ b/demo/index.jade @@ -1,18 +1,21 @@ mixin sample(name) - var s = self.self[name]; - h3= s.title - if s.description - p= s.description + //-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) + pre.collapse.code-sample(id='code-sample-' + name) code.js= s.code .row(id=name) .col-xs-6 textarea.source= s.source section.col-xs-6 + a.mode(href='#') html / source .result + pre.result-text + code.result-text-data doctype html html @@ -28,15 +31,15 @@ html 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 + //-h2 Basic examples +sample('demo1') + //- +sample('demo2') h2 Advanced examples @@ -45,5 +48,7 @@ html +sample('demo4') +sample('demo5') + .gh-ribbon + a(href='https://github.com/jonschlinkert/remarkable') Fork me on GitHub - + script(src='./assets/index.js') diff --git a/package.json b/package.json index b55467b..9b947f2 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "eslint": "0.8.0", "eslint-plugin-nodeca": "^1.0.0", "jade": "1.6.0", + "js-yaml": "3.2.2", "mocha": "*", - "uglifyjs": "*" + "uglify-js": "*" } }