Updated demo styles and docs

README.md

@@ -39,6 +39,7 @@ bower install remarkable --save
 ```javascript
 var Remarkable = require('remarkable');
 
+// This values are default
 var md = new Remarkable({
   html:         false,        // Enable html tags in source
   xhtmlOut:     false,        // Use '/' to close single tags (<br />)
@@ -79,6 +80,32 @@ var Remarkable = require('remarkable');
 var md = new Remarkable('commonmark');
 ```
 
+### Highligh fenced blocks
+
+To highlight content of fenced block, assing function to `highlight` option:
+
+```javascript
+var Remarkable = require('remarkable');
+var hljs       = require('highlight.js') // https://highlightjs.org/
+
+// This values are default
+var md = new Remarkable({
+  highlight: function (str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return hljs.highlight(lang, str).value;
+      } catch (__) {}
+    }
+
+    try {
+      return hljs.highlightAuto(str).value;
+    } catch (__) {}
+
+    return ''; // use external default escaping
+  }
+});
+```
+
 ### Typorgapher
 
 Though full weigh typograpic replacements are language specific, `remarkable`
@@ -88,6 +115,7 @@ provides the most common and universal case coverage:
 var Remarkable = require('remarkable');
 var md = new Remarkable({ typographer: true });
 
+// This values are default
 md.typographer.set({
   singleQuotes: '‘’',
   doubleQuotes: '“”', // «» - russian, „“ - deutch
@@ -96,12 +124,19 @@ md.typographer.set({
   registered:   true, // (r) (R) → ®
   plusminus:    true, // +- → ±
   paragraph:    true, // (p) (P) -> §
-  ellipsis:     true, // ... → …
+  ellipsis:     true, // ... → … (also ?.... → ?.., !.... → !..)
   dupes:        true, // ???????? → ???, !!!!! → !!!, `,,` → `,`
   emDashes:     true  // -- → —
 })
 ```
 
+### More extras
+
+This extentions are anabled by default
+
+- [Strike out](https://help.github.com/articles/github-flavored-markdown/#strikethrough)
+- [tables](https://help.github.com/articles/github-flavored-markdown/#tables)
+
 
 ## References / Thanks
 

demo/assets/index.css

@@ -44,7 +44,6 @@ body {
   position: absolute;
   right: 15px;
   top: 0;
-  padding: 0 10px;
   border-radius: 0 4px;
   font-size: 12px;
   background-color: #666;
@@ -57,9 +56,15 @@ body {
   opacity: 1;
 }
 .demo-control a {
-  margin: 0 20px;
+  padding: 0 20px;
   color: #fff !important;
 }
+.demo-control a:first-child {
+  padding-left: 30px;
+}
+.demo-control a:last-child {
+  padding-right: 30px;
+}
 .hljs {
   background: none;
   padding: 0;

demo/assets/index.js

@@ -23,12 +23,13 @@
     var hljs = window.hljs;
     if (lang && hljs.getLanguage(lang)) {
       try {
-        //console.log(lang, hljs.highlight(lang, str));
         return hljs.highlight(lang, str).value;
       } catch (__) {}
     }
 
-    try { return hljs.highlightAuto(str).value; } catch (__) {}
+    try {
+      return hljs.highlightAuto(str).value;
+    } catch (__) {}
 
     return '';
   };

demo/assets/index.styl

@@ -42,7 +42,7 @@ body
   position absolute
   right 15px
   top 0
-  padding 0 10px
+  //padding 0 10px
   border-radius 0 4px
   font-size 12px
   background-color #666
@@ -52,8 +52,12 @@ body
   &:hover
     opacity 1
   a
-    margin 0 20px
+    padding 0 20px
     color #fff !important
+  a:first-child
+    padding-left 30px
+  a:last-child
+    padding-right 30px
 
 .hljs
   background none

demo/index.html

@@ -17,18 +17,31 @@
       <h1>Remarkable demo</h1>
       <p><a data-toggle="collapse" href="#code-sample">code sample</a></p>
       <pre id="code-sample" class="collapse code-sample"><code class="js">var Remarkable = require('remarkable');
+var hljs       = require('highlight.js') // https://highlightjs.org/
 
 var md = new Remarkable({
   html:         false,        // Enable html tags in source
   xhtmlOut:     false,        // Use '/' to close single tags (&lt;br /&gt;)
   breaks:       false,        // Convert '\n' in paragraphs into &lt;br&gt;
   langPrefix:   'language-',  // CSS language prefix for fenced blocks
-  linkify:      false,        // autoconvert url-like texts to links
-  typographer:  false,        // Enable smartypants and other sweet transforms
+  linkify:      true,         // autoconvert url-like texts to links
+  typographer:  true,         // Enable smartypants and other sweet transforms
 
   // Highlighter function. Should return escaped html,
   // or '' if input not changed
-  highlight: function (/*str, , lang*/) { return ''; }
+  highlight: function (/*str, lang*/) {
+    if (lang &amp;&amp; hljs.getLanguage(lang)) {
+      try {
+        return hljs.highlight(lang, str).value;
+      } catch (__) {}
+    }
+
+    try {
+      return hljs.highlightAuto(str).value;
+    } catch (__) {}
+
+    return ''; // use external default escaping
+  }
 });
 
 console.log(md.parse('# Remarkable rulezz!'));

demo/sample.js

@@ -1,16 +1,29 @@
 var Remarkable = require('remarkable');
+var hljs       = require('highlight.js') // https://highlightjs.org/
 
 var md = new Remarkable({
   html:         false,        // Enable html tags in source
   xhtmlOut:     false,        // Use '/' to close single tags (<br />)
   breaks:       false,        // Convert '\n' in paragraphs into <br>
   langPrefix:   'language-',  // CSS language prefix for fenced blocks
-  linkify:      false,        // autoconvert url-like texts to links
-  typographer:  false,        // Enable smartypants and other sweet transforms
+  linkify:      true,         // autoconvert url-like texts to links
+  typographer:  true,         // Enable smartypants and other sweet transforms
 
   // Highlighter function. Should return escaped html,
   // or '' if input not changed
-  highlight: function (/*str, , lang*/) { return ''; }
+  highlight: function (str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return hljs.highlight(lang, str).value;
+      } catch (__) {}
+    }
+
+    try {
+      return hljs.highlightAuto(str).value;
+    } catch (__) {}
+
+    return ''; // use external default escaping
+  }
 });
 
 console.log(md.parse('# Remarkable rulezz!'));