Markdown

Markdown 的使用

1,首先下载  typora ;这是用来写markdown的编辑器,当然也有网页版的工具可以用。

2,在线的编辑器可以看这里,也能够熟悉用法:

https://www.zybuluo.com/mdeditor

 

将 Markdown 变为 HTML

利用github开源的库 marked

打开 https://cdnjs.com/libraries/marked

cdn地址引入:

https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.js

利用在线编辑

js.jirengu.com

在这里样式引入了

https://github.com/sofish/typo.css

typo.css是不错的排版样式 ,在github上可以做关注了解,可以应用于博客排版。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.js"></script>
  <link rel="stylesheet" href="http://typo.sofi.sh/typo.css">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <style>
      body{
        padding:16px;
      }
      img{max-width:100%;}
  </style>
</head>
<body>
    <div id="content"></div>
    <script>
      var markdown = `
# Marked in browser
Rendered by **marked**.

[我的博客园](http://www.cnblogs.com/wang715100018066/)

**王立娟**
> 不在沉默中爆发,就在沉默中灭亡。——鲁迅

看我用markdown

<!-- ![](http://i4.buimg.com/567571/eccda517011fad98.jpg) -->
<img src="http://i4.buimg.com/567571/eccda517011fad98.jpg" alt="">
响应式页面注意:
1,不要让页面出现缩放;即mata声明;
2,最大宽度100%;
`
      var html = marked(markdown);
      
      console.log(html);
      //"<h1 id=\"marked-in-browser\">Marked in browser</h1><p>Rendered by <strong>marked</strong>.</p>"
      
      document.getElementById('content').innerHTML = html;
    </script>
</body>
</html>

 

查看地址:

https://besswang.github.io/blog/index.html

 

posted @ 2017-03-28 06:37  最爱小虾  阅读(198)  评论(0编辑  收藏  举报