Public-Mirrors
/
markdown-it
mirror of https://github.com/markdown-it/markdown-it.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Demo: output html highlight + minor style updates

pull/14/head
Vitaly Puzrin 10 years ago
parent
34988f3182
commit
46a71bc150
5 changed files with 17 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      demo/assets/index.css
  2. 2
      demo/assets/index.js
  3. 8
      demo/assets/index.styl
  4. 3
      demo/index.html
  5. 3
      demo/index.jade

8
demo/assets/index.css
View File

@ -6,12 +6,13 @@ body,
body { body {
overflow-x: hidden; overflow-x: hidden;
padding-bottom: 180px; padding-bottom: 180px;
background-color: #fbfbfb;
} }
.demo-options { .demo-options {
margin-bottom: 10px; margin-bottom: 10px;
} }
.opt__strict .not-strict { .opt__strict .not-strict {
opacity: 0.5; opacity: 0.3;
} }
.checkbox { .checkbox {
margin-right: 10px; margin-right: 10px;
@ -20,16 +21,19 @@ body {
width: 100%; width: 100%;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: 13px; font-size: 13px;
padding: 2px;
} }
.result { .result {
padding-right: 20px; padding: 2px 10px;
overflow: auto; overflow: auto;
background-color: #fff;
} }
.result img { .result img {
max-width: 50%; max-width: 50%;
} }
.result-src { .result-src {
display: none; display: none;
background-color: #fff;
} }
.result-src-content { .result-src-content {
white-space: pre; white-space: pre;

2
demo/assets/index.js
View File

@ -56,7 +56,7 @@
function updateResult() { function updateResult() {
var source = $('.source').val(); var source = $('.source').val();
$('.result').html(mdHtml.render(source)); $('.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 { try {
if (source) { if (source) {
// serialize state - source and options // serialize state - source and options

8
demo/assets/index.styl
View File

@ -5,12 +5,13 @@ html, body, .full-height
body body
overflow-x hidden overflow-x hidden
padding-bottom 180px padding-bottom 180px
background-color #fbfbfb
.demo-options .demo-options
margin-bottom 10px margin-bottom 10px
.opt__strict .not-strict .opt__strict .not-strict
opacity 0.5 opacity 0.3
.checkbox .checkbox
margin-right 10px margin-right 10px
@ -19,15 +20,18 @@ body
width 100% width 100%
font-family Menlo, Monaco, Consolas, "Courier New", monospace font-family Menlo, Monaco, Consolas, "Courier New", monospace
font-size 13px font-size 13px
padding 2px
.result .result
padding-right 20px padding 2px 10px
overflow auto overflow auto
background-color #fff
img img
max-width 50% max-width 50%
.result-src .result-src
display none display none
background-color #fff
.result-src-content .result-src-content
white-space pre white-space pre

3
demo/index.html
View File

@ -2,12 +2,13 @@
<html> <html>
<head> <head>
<title>Remarkable demo</title> <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/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/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> <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"> <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> <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> <script src="../dist/remarkable.js"></script>
<link rel="stylesheet" href="./assets/index.css"> <link rel="stylesheet" href="./assets/index.css">
<script src="./assets/index.js"></script> <script src="./assets/index.js"></script>

3
demo/index.jade
View File

@ -2,6 +2,7 @@ doctype html
html html
head head
title Remarkable demo title Remarkable demo
meta(charset='UTF-8')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js') 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') 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(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') script(src='../dist/remarkable.js')

Write Preview
Loading…
Cancel
Save