Demo: output html highlight + minor style updates

10 years ago · 46a71bc150
5 changed files with 17 additions and 7 deletions
--- a/demo/assets/index.css
+++ b/demo/assets/index.css
@ -6,12 +6,13 @@ body,
 body {
  overflow-x: hidden;
  padding-bottom: 180px;
+  background-color: #fbfbfb;
 }
 .demo-options {
  margin-bottom: 10px;
 }
 .opt__strict .not-strict {
-  opacity: 0.5;
+  opacity: 0.3;
 }
 .checkbox {
  margin-right: 10px;
@ -20,16 +21,19 @@ body {
  width: 100%;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 13px;
+  padding: 2px;
 }
 .result {
-  padding-right: 20px;
+  padding: 2px 10px;
  overflow: auto;
+  background-color: #fff;
 }
 .result img {
  max-width: 50%;
 }
 .result-src {
  display: none;
+  background-color: #fff;
 }
 .result-src-content {
  white-space: pre;
--- a/demo/assets/index.js
+++ b/demo/assets/index.js
@ -56,7 +56,7 @@
  function updateResult() {
    var source = $('.source').val();
    $('.result').html(mdHtml.render(source));
-    $('.result-src-content').text(mdSrc.render(source));
+    $('.result-src-content').html(window.hljs.highlight('html', mdSrc.render(source)).value);
    try {
      if (source) {
        // serialize state - source and options
--- a/demo/assets/index.styl
+++ b/demo/assets/index.styl
@ -5,12 +5,13 @@ html, body, .full-height
 body
  overflow-x hidden
  padding-bottom 180px
+  background-color #fbfbfb

 .demo-options
  margin-bottom 10px

 .opt__strict .not-strict
-  opacity 0.5
+  opacity 0.3

 .checkbox
  margin-right 10px
@ -19,15 +20,18 @@ body
  width 100%
  font-family Menlo, Monaco, Consolas, "Courier New", monospace
  font-size 13px
+  padding 2px

 .result
-  padding-right 20px
+  padding 2px 10px
  overflow auto
+  background-color #fff
  img
    max-width 50%

 .result-src
  display none
+  background-color #fff

 .result-src-content
  white-space pre
--- a/demo/index.html
+++ b/demo/index.html
@ -2,12 +2,13 @@
 <html>
  <head>
    <title>Remarkable demo</title>
+    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/solarized_light.min.css">
    <script src="../dist/remarkable.js"></script>
    <link rel="stylesheet" href="./assets/index.css">
    <script src="./assets/index.js"></script>
--- a/demo/index.jade
+++ b/demo/index.jade
@ -2,6 +2,7 @@ doctype html
 html
  head
    title Remarkable demo
+    meta(charset='UTF-8')

    script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js')

@ -11,7 +12,7 @@ html
    link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css')

    script(src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js')
-    link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css')
+    link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/solarized_light.min.css')

    script(src='../dist/remarkable.js')