Demo: added options support

demo/.eslintrc

@@ -4,3 +4,4 @@ env:
 
 globals:
   $: false
+  _: false

demo/assets/index.css

@@ -1 +1 @@
-body{margin-bottom:20px;overflow:hidden}.source,.result,.result-src{width:100%;height:350px}.result{padding-right:20px;overflow:auto;}.result img{max-width:100%}.result-src{display:none}.result-src-content{white-space:pre}.result-as-text .result-src{display:block}.result-as-text .result{display:none}.demo-control{position:absolute;right:15px;top:0;padding:0 10px;border-radius:0 4px;font-size:12px;background-color:#666;color:#fff !important;opacity:.6;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;}.demo-control:hover{opacity:1}.demo-control a{margin:0 20px;color:#fff !important}.hljs{background:none;padding:0}.gh-ribbon{display:block;position:absolute;right:-60px;top:44px;-webkit-transform:rotate(45deg);-ms-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{text-decoration:none !important;border:1px solid #ccc;color:#fff;display:block;font-size:13px;font-weight:700;outline:medium none;padding:4px 50px 2px;text-align:center}
+body{margin-bottom:20px;overflow:hidden}.demo-options{margin-bottom:10px}.checkbox{margin-right:10px}.source,.result,.result-src{width:100%;height:350px}.result{padding-right:20px;overflow:auto;}.result img{max-width:100%}.result-src{display:none}.result-src-content{white-space:pre}.result-as-text .result-src{display:block}.result-as-text .result{display:none}.demo-control{position:absolute;right:15px;top:0;padding:0 10px;border-radius:0 4px;font-size:12px;background-color:#666;color:#fff !important;opacity:.6;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;}.demo-control:hover{opacity:1}.demo-control a{margin:0 20px;color:#fff !important}.hljs{background:none;padding:0}.gh-ribbon{display:block;position:absolute;right:-60px;top:44px;-webkit-transform:rotate(45deg);-ms-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{text-decoration:none !important;border:1px solid #ccc;color:#fff;display:block;font-size:13px;font-weight:700;outline:medium none;padding:4px 50px 2px;text-align:center}

demo/assets/index.js

@@ -3,16 +3,20 @@
 
   var mdHtml, mdSrc, permalink;
 
-  var options = {
+  var defaults = {
     html: true,
     xhtml: true,
     breaks: false,
-    langprefix: 'language-'
+    langprefix: 'language-',
+
+    // options below are for demo only
+    _highlight: false,
+    _src: false
   };
 
   function mdInit() {
-    mdHtml = new window.Remarkable(options);
+    mdHtml = new window.Remarkable(defaults);
-    mdSrc = new window.Remarkable(options);
+    mdSrc = new window.Remarkable(defaults);
 
     // Beautify output of parser for html content
     mdHtml.renderer.rules.table_open = function () {
@@ -26,11 +30,17 @@
     $('.result-src-content').text(mdSrc.render(source));
     try {
       if (source) {
-        permalink.href = '#md=' + encodeURIComponent(source);
+        // serialize state - source and options
+        permalink.href = '#md=' + encodeURIComponent(JSON.stringify({
+          defaults: _.omit(defaults, 'highlight'),
+          source: source
+        }));
       } else {
         permalink.href = '';
       }
-    } catch (__) {}
+    } catch (__) {
+      permalink.href = '';
+    }
   }
 
 
@@ -42,21 +52,82 @@
 
     // Restore content if opened by permalink
     if (location.hash && location.hash.toString().slice(0,4) === '#md=') {
-      $('.source').val(decodeURIComponent(location.hash.slice(4)));
+      try {
+        var cfg = JSON.parse(decodeURIComponent(location.hash.slice(4)));
+
+        if (_.isString(cfg.source)) {
+          $('.source').val(cfg.source);
+        }
+
+        var opts = _.isObject(cfg.defaults) ? cfg.defaults : {};
+
+        // copy config to defaults, but only if key exists
+        // and value has the same type
+        _.forOwn(opts, function (val, key) {
+          if (!defaults.hasOwnProperty(key)) { return; }
+
+          if ((_.isBoolean(defaults[key]) && _.isBoolean(val)) ||
+              (_.isString(defaults[key]) && _.isString(val))) {
+            defaults[key] = val;
+          }
+        });
+      } catch (__) {}
     }
 
-    mdInit();
+    // Activate tooltips
+    $('._tip').tooltip({ container: 'body' });
+
+    // Set default option values and option listeners
+    _.forOwn(defaults, function (val, key) {
+      if (key === 'highlight') { return; }
+
+      var el = document.getElementById(key);
+
+      if (!el) { return; }
+
+      var $el = $(el);
+
+      if (_.isBoolean(val)) {
+        $el.prop('checked', val);
+        $el.on('change', function () {
+          defaults[key] = Boolean($el.prop('checked'));
+          mdInit();
+          updateResult();
+        });
 
+      } else {
+        $(el).val(val);
+        $el.on('change update keyup', function () {
+          defaults[key] = String($(el).val());
+          mdInit();
+          updateResult();
+        });
+      }
+    });
+
+    // Set display mode for result
+    if (defaults._src) {
+      $('body').addClass('result-as-text');
+    }
+
+
+    mdInit();
     permalink = document.getElementById('permalink');
 
+    // Setup listeners
     $('.source').on('keyup paste cut mouseup', updateResult);
+
     $('.source-clear').on('click', function (event) {
       $('.source').val('');
       updateResult();
       event.preventDefault();
     });
+
     $('.result-mode').on('click', function (event) {
+      defaults._src = !defaults._src;
       $('body').toggleClass('result-as-text');
+      // only to update permalink
+      updateResult();
       event.preventDefault();
     });
 

demo/assets/index.styl

@@ -2,6 +2,12 @@ body
   margin-bottom 20px
   overflow hidden
 
+.demo-options
+  margin-bottom 10px
+
+.checkbox
+  margin-right 10px
+
 .source, .result, .result-src
   width 100%
   height 350px

demo/index.html

@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <title>Remarkable demo</title>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
     <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"></script>
@@ -12,7 +14,7 @@
   </head>
   <body>
     <div class="container">
-      <h1>remarkable demo</h1>
+      <h1>Remarkable demo</h1>
       <p><a data-toggle="collapse" href="#code-sample">Show code sample</a></p>
       <pre id="code-sample" class="collapse code-sample"><code class="js">var Remarkable = require('remarkable');
 
@@ -26,6 +28,31 @@ var md = new Remarkable({
 console.log(md.parse('# Remarkable rulezz!'));
 // =&gt; &lt;h1&gt;Remarkable rulezz!&lt;/h1&gt;
 </code></pre>
+      <div class="form-inline demo-options">
+        <div class="checkbox">
+          <label title="enable html tags in source text" class="_tip">
+            <input id="html" type="checkbox"> html
+          </label>
+        </div>
+        <div class="checkbox">
+          <label title="add / to single tags (&lt;br /&gt; instead of &lt;br&gt;" class="_tip">
+            <input id="xhtml" type="checkbox"> xhtml
+          </label>
+        </div>
+        <div class="checkbox">
+          <label title="newlines in paragraphs are rendered as &lt;br&gt;" class="_tip">
+            <input id="breaks" type="checkbox"> breaks
+          </label>
+        </div>
+        <div class="checkbox">
+          <label title="enable output highlight for fenced blocks" class="_tip">
+            <input id="_highlight" type="checkbox"> highlight
+          </label>
+        </div>
+        <div class="form-group">
+          <input id="langprefix" type="input" placeholder="language prefix" title="css class language prefix for fenced code blocks" class="form-control _tip">
+        </div>
+      </div>
       <div class="row">
         <div class="col-xs-6">
           <div class="demo-control"><a href="#" class="source-clear">clear</a><a id="permalink" href="./" title="Share this snippet as link"><strong>permalink</strong></a></div>

demo/index.jade

@@ -1,8 +1,12 @@
 doctype html
 html
   head
+    title Remarkable demo
+
     script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js')
 
+    script(src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.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')
 
@@ -17,12 +21,36 @@ html
   body
     .container
       - var s = self.self.demo;
-      h1 remarkable demo
+      h1 Remarkable demo
 
       p: a(data-toggle='collapse' href='#code-sample') Show code sample
       pre.collapse.code-sample(id='code-sample')
         code.js= s.code
 
+      .form-inline.demo-options
+        .checkbox
+          label._tip(title='enable html tags in source text')
+            input#html(type='checkbox')
+            |  html
+        .checkbox
+          label._tip(title='add / to single tags (<br /> instead of <br>')
+            input#xhtml(type='checkbox')
+            |  xhtml
+        .checkbox
+          label._tip(title='newlines in paragraphs are rendered as <br>')
+            input#breaks(type='checkbox')
+            |  breaks
+        .checkbox
+          label._tip(title='enable output highlight for fenced blocks')
+            input#_highlight(type='checkbox')
+            |  highlight
+        .form-group
+          input#langprefix.form-control._tip(
+            type='input'
+            placeholder='language prefix'
+            title='css class language prefix for fenced code blocks'
+          )
+
       .row
         .col-xs-6
           .demo-control