Demo rebuild

demo/assets/index.css

@@ -10,6 +10,9 @@ body {
 .demo-options {
   margin-bottom: 10px;
 }
+.opt__strict .not-strict {
+  opacity: 0.5;
+}
 .checkbox {
   margin-right: 10px;
 }
@@ -23,7 +26,7 @@ body {
   overflow: auto;
 }
 .result img {
-  max-width: 100%;
+  max-width: 50%;
 }
 .result-src {
   display: none;

demo/index.html

@@ -35,46 +35,62 @@ console.log(md.parse('# Remarkable rulezz!'));
 // => <h1>Remarkable rulezz!</h1>
 </code></pre>
       <div class="form-inline demo-options">
-        <div class="checkbox">
+        <div class="checkbox not-strict">
           <label title="enable html tags in source text" class="_tip">
             <input id="html" type="checkbox"> html
           </label>
         </div>
-        <div class="checkbox">
+        <div class="checkbox not-strict">
           <label title="produce xtml output (add / to single tags (&lt;br /&gt; instead of &lt;br&gt;)" class="_tip">
             <input id="xhtmlOut" type="checkbox"> xhtmlOut
           </label>
         </div>
-        <div class="checkbox">
+        <div class="checkbox not-strict">
           <label title="newlines in paragraphs are rendered as &lt;br&gt;" class="_tip">
             <input id="breaks" type="checkbox"> breaks
           </label>
         </div>
-        <div class="checkbox">
+        <div class="checkbox not-strict">
           <label title="autoconvert link-like texts to links" class="_tip">
             <input id="linkify" type="checkbox"> linkify
           </label>
         </div>
-        <div class="checkbox">
+        <div class="checkbox not-strict">
           <label title="do typographyc replacements, (c) -&gt; © and so on" class="_tip">
             <input id="typographer" type="checkbox"> typographer
           </label>
         </div>
-        <div class="checkbox">
+        <div class="checkbox not-strict">
           <label title="enable output highlight for fenced blocks" class="_tip">
             <input id="_highlight" type="checkbox"> highlight
           </label>
         </div>
-        <div class="form-group">
+        <div class="form-group not-strict">
           <input id="langPrefix" type="input" placeholder="language prefix" title="css class language prefix for fenced code blocks" class="form-control _tip">
         </div>
+        <div class="checkbox">
+          <label title="force strict CommonMark mode - output will be equal to reference parser" class="_tip">
+            <input id="_strict" type="checkbox"> CommonMark strict
+          </label>
+        </div>
       </div>
     </div>
     <div class="container full-height">
       <div class="row full-height">
         <div class="col-xs-6 full-height">
           <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>
-          <textarea class="source full-height"># h1 Heading
+          <textarea class="source full-height">---
+__Advertisement :)__
+
+- __[pica](http://nodeca.github.io/pica/demo/)__ - high quality and fast image
+  resize in browser.
+- __[babelfish](https://github.com/nodeca/babelfish/)__ - developpers friendly
+  i18n with plurals support and easy syntax.
+You will like those projects!
+
+---
+
+# h1 Heading
 ## h2 Heading
 ### h3 Heading
 #### h4 Heading
@@ -142,17 +158,12 @@ Unordered
 + Lorem ipsum dolor sit amet
 + Consectetur adipiscing elit
 + Integer molestie lorem at massa
-+ Facilisis in pretium nisl aliquet
-+ Nulla volutpat aliquam velit
   - Phasellus iaculis neque
-  - Purus sodales ultricies
   - Vestibulum laoreet porttitor sem
   - Ac tristique libero volutpat at
-    * Consectetur adipiscing elit
+    * Facilisis in pretium nisl aliquet
-    * Integer molestie lorem at massa
+    * Nulla volutpat aliquam velit
 + Faucibus porta lacus fringilla vel
-+ Aenean sit amet erat nunc
-+ Eget porttitor lorem
 
 Ordered
 
@@ -160,10 +171,6 @@ Ordered
 2. Consectetur adipiscing elit
 3. Integer molestie lorem at massa
 4. Facilisis in pretium nisl aliquet
-5. Nulla volutpat aliquam velit
-6. Faucibus porta lacus fringilla vel
-7. Aenean sit amet erat nunc
-8. Eget porttitor lorem
 
 
 ## Code
@@ -187,24 +194,11 @@ Sample text here...
 Syntax highlighting
 
 ``` js
-grunt.initConfig({
+var foo = function (bar) {
-  assemble: {
+  return bar++;
-    options: {
-      assets: 'docs/assets',
-      data: 'src/data/*.{json,yml}',
-      helpers: 'src/custom-helpers.js',
-      partials: ['src/partials/**/*.{hbs,md}']
-    },
-    pages: {
-      options: {
-        layout: 'default.hbs'
-      },
-      files: {
-        './': ['src/templates/pages/index.hbs']
-      }
-    }
-  }
 };
+
+console.log(foo(5));
 ```
 
 ## Tables

dist/remarkable.js

@@ -3463,8 +3463,20 @@ rules.table_open = function (/*tokens, idx, options*/) {
 rules.table_close = function (/*tokens, idx, options*/) {
   return '</table>\n';
 };
+rules.thead_open = function (/*tokens, idx, options*/) {
+  return '\t<thead>\n';
+};
+rules.thead_close = function (/*tokens, idx, options*/) {
+  return '\t</thead>\n';
+};
+rules.tbody_open = function (/*tokens, idx, options*/) {
+  return '\t<tbody>\n';
+};
+rules.tbody_close = function (/*tokens, idx, options*/) {
+  return '\t</tbody>\n';
+};
 rules.tr_open = function (/*tokens, idx, options*/) {
-  return '<tr>\n';
+  return '\t\t<tr>';
 };
 rules.tr_close = function (/*tokens, idx, options*/) {
   return '</tr>\n';
@@ -3472,20 +3484,20 @@ rules.tr_close = function (/*tokens, idx, options*/) {
 rules.th_open = function (tokens, idx /*, options*/) {
   var token = tokens[idx];
   return '<th'
-    + (token.align ? ' align="' + token.align + '"' : '')
+    + (token.align ? ' style="text-align:' + token.align + '"' : '')
     + '>';
 };
 rules.th_close = function (/*tokens, idx, options*/) {
-  return '</th>\n';
+  return '</th>';
 };
 rules.td_open = function (tokens, idx /*, options*/) {
   var token = tokens[idx];
   return '<td'
-    + (token.align ? ' align="' + token.align + '"' : '')
+    + (token.align ? ' style="text-align:' + token.align + '"' : '')
     + '>';
 };
 rules.td_close = function (/*tokens, idx, options*/) {
-  return '</td>\n';
+  return '</td>';
 };
 
 
@@ -4781,7 +4793,7 @@ module.exports = function table(state, startLine, endLine, silent) {
   // first character of the second line should be '|' or '-'
   ch = state.src.charCodeAt(state.bMarks[startLine + 1]
      + state.tShift[startLine + 1]);
-  if (ch !== 0x7C/* | */ && ch !== 0x2D/* - */) { return false; }
+  if (ch !== 0x7C/* | */ && ch !== 0x2D/* - */ && ch !== 0x3A/* : */) { return false; }
 
   secondLineMatch = lineMatch(state, startLine + 1,
     /^ *\|?(( *[:-]-+[:-] *\|)+( *[:-]-+[:-] *))\|? *$/);
@@ -4808,6 +4820,7 @@ module.exports = function table(state, startLine, endLine, silent) {
   if (silent) { return true; }
 
   state.tokens.push({ type: 'table_open', level: state.level++ });
+  state.tokens.push({ type: 'thead_open', level: state.level++ });
 
   state.tokens.push({ type: 'tr_open', level: state.level++ });
   for (i = 0; i < rows.length; i++) {
@@ -4820,6 +4833,8 @@ module.exports = function table(state, startLine, endLine, silent) {
     state.tokens.push({ type: 'th_close', level: --state.level });
   }
   state.tokens.push({ type: 'tr_close', level: --state.level });
+  state.tokens.push({ type: 'thead_close', level: --state.level });
+  state.tokens.push({ type: 'tbody_open', level: state.level++ });
 
   for (nextLine = startLine + 2; nextLine < endLine; nextLine++) {
     m = lineMatch(state, nextLine, /^ *\|?(.*?\|.*?)\|? *$/);
@@ -4837,6 +4852,7 @@ module.exports = function table(state, startLine, endLine, silent) {
     }
     state.tokens.push({ type: 'tr_close', level: --state.level });
   }
+  state.tokens.push({ type: 'tbody_close', level: --state.level });
   state.tokens.push({ type: 'table_close', level: --state.level });
 
   state.line = nextLine;