CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

使用 markdown.css 美化你的markdown

发布时间:『 2016-10-23 19:33』  博客类别:WEB前端  阅读(2157) 评论(0)

Markdown现在很火,CSDN 上一大部分专家都在使用 Markdown 进行博客写作。Markdown 正在取代传统的富文本编辑器,今天就教大家如何让自己的博客支持 Markdown 。同时有些人的博客虽然支持了 Markdown ,但是写出来的文章样式其丑无比。

Markdown 本身的特色无需多讲:语法简单,记忆负担小,纯文本,流畅书写,无违和感,各种渲染效果。但是 Markdown 直接输出html后,样式非常的难看,这也是为什么部分人又放弃 Markdown 的原因。

本文将使用 github-markdown.css 文件来美化 Markdown 的输出。

以下是详细的代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>CODE大全教你优化Markdown</title>
<link rel="stylesheet" href="github-markdown.css">
<style>
    .markdown-body {
        box-sizing: border-box;
        min-width: 200px;
        max-width: 980px;
        margin: 0 auto;
        padding: 45px;
    }
</style>
<script src="http://cdn.bootcss.com/showdown/1.4.3/showdown.min.js" 
type="text/javascript"></script>
</head>
<body>
<div>
<!-- 简单的markdown编辑器 -->
<div class="markdown-body">
<textarea id="content" style="height:400px;width:800px;" onkeyup="compile()">
</textarea>
</div>
<!-- Markdown写作后,显示的文章内容 -->
<article class="markdown-body" id="markdown-test">
</article>
</div>
<script type="text/javascript">
function compile(){
    var text = document.getElementById("content").value;
	var converter = new showdown.Converter(),
    html      = converter.makeHtml(text);
    document.getElementById("markdown-test").innerHTML = html;
}
</script>
</body>
</html>

运行效果:

aa.png

相关源码和样式下载

链接: http://pan.baidu.com/s/1pKOgwqf 密码: 7zk8

markdown 美化样式demo下载


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   markdown     markdown.js     markdown.css     美化markdown     markdown编辑器  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有