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)  编辑  收藏  举报