Updated demo files

10 years ago · 3ec7c4a01a
6 changed files with 116 additions and 79 deletions
--- 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
-}
+}
+
+.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;
+}
--- 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);
  });
-});
+});
+
+var md = new window.Remarkable({
+  html: true,
+  xhtml: true,
+  breaks: false,
+  langprefix: 'language-'
+});
+
+md.renderer.rules.table_open = function () {
+  return '<table class="table table-striped">\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();
--- 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!'));
--- a/demo/index.html
+++ b/demo/index.html
@ -8,26 +8,18 @@
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css">
    <script src="../dist/remarkable.js"></script>
    <link rel="stylesheet" href="./assets/index.css">
-    <script src="./assets/index.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>remarkable demo</h1>
-      <h2>Basic examples</h2>
-      <h3>Simple markdown</h3>
-      <p>That's a sample of typical `remarkable` use. You can play with content
-</p>
      <p><a data-toggle="collapse" href="#code-sample-demo1">Show code</a></p>
-      <pre id="code-sample-demo1" class="collapse"><code class="js">var Remarkable = require('remarkable');
+      <pre id="code-sample-demo1" class="collapse code-sample"><code class="js">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 &quot;Awesome markdown parser&quot;)
 </textarea>
        </div>
-        <section class="col-xs-6">
-          <div class="result"></div>
-        </section>
-      </div>
-      <h3>Code highlight</h3>
-      <p><a data-toggle="collapse" href="#code-sample-demo2">Show code</a></p>
-      <pre id="code-sample-demo2" class="collapse"><code class="js"></code></pre>
-      <div id="demo2" class="row">
-        <div class="col-xs-6">
-          <textarea class="source"></textarea>
-        </div>
-        <section class="col-xs-6">
-          <div class="result"></div>
-        </section>
-      </div>
-      <h2>Advanced examples</h2>
-      <h3>Typograph</h3>
-      <p><a data-toggle="collapse" href="#code-sample-demo3">Show code</a></p>
-      <pre id="code-sample-demo3" class="collapse"><code class="js"></code></pre>
-      <div id="demo3" class="row">
-        <div class="col-xs-6">
-          <textarea class="source"></textarea>
-        </div>
-        <section class="col-xs-6">
-          <div class="result"></div>
-        </section>
-      </div>
-      <h3>Block macros</h3>
-      <p><a data-toggle="collapse" href="#code-sample-demo4">Show code</a></p>
-      <pre id="code-sample-demo4" class="collapse"><code class="js"></code></pre>
-      <div id="demo4" class="row">
-        <div class="col-xs-6">
-          <textarea class="source"></textarea>
-        </div>
-        <section class="col-xs-6">
-          <div class="result"></div>
-        </section>
-      </div>
-      <h3>Custom tag (lexer plugin)</h3>
-      <p><a data-toggle="collapse" href="#code-sample-demo5">Show code</a></p>
-      <pre id="code-sample-demo5" class="collapse"><code class="js"></code></pre>
-      <div id="demo5" class="row">
-        <div class="col-xs-6">
-          <textarea class="source"></textarea>
-        </div>
-        <section class="col-xs-6">
+        <section class="col-xs-6"><a href="#" class="mode">html / source</a>
          <div class="result"></div>
+          <pre class="result-text"><code class="result-text-data"></code></pre>
        </section>
      </div>
    </div>
+    <div class="gh-ribbon"><a href="https://github.com/jonschlinkert/remarkable">Fork me on GitHub</a></div>
+    <script src="./assets/index.js"></script>
  </body>
 </html>
--- 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')
--- 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": "*"
  }
 }