Markdown
2019-03-16 本文已影响0人
凤非飞
在jsp中使用markdown
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>editor</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-markdown.min.css">
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation"></nav>
<form>
<textarea name="content" data-provide="markdown" data-iconlibrary="fa" rows="10" id="editor"></textarea>
</form>
<!-- 该jquery文件必须在bootstrap.min.js之前引入 -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
<script src="js/bootstrap-markdown.js"></script>
<script src="js/bootstrap-markdown.fr.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.markdown.messages.zh = {
'Bold': "粗体",
'Italic': "斜体",
'Heading': "标题",
'URL/Link': "链接",
'Image': "图片",
'List': "列表",
'Unordered List': "无序列表",
'Ordered List': "有序列表",
'Code': "代码",
'Quote': "引用",
'Preview': "预览",
'strong text': "粗体",
'emphasized text': "强调",
'heading text': "标题",
'enter link description here': "输入链接说明",
'Insert Hyperlink': "URL地址",
'enter image description here': "输入图片说明",
'Insert Image Hyperlink': "图片URL地址",
'enter image title here': "在这里输入图片标题",
'list text here': "这里是列表文本",
'code text here': "这里输入代码",
'quote here': "这里输入引用文本"
};
}(jQuery));
$("#editor").markdown({
autofocus: true,
language: 'zh',
})
</script>
</body>
</html>
所需要的js.css等等文件还有结构
image
下载：https://github.com/laotoutou/myfile_for_jianshu/blob/master/markdown.zip。
但是这样就必须保持这样的目录结构，后面我再找找更好的
显示图
1.png
将markdown转换为HTML
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html>
<head>
<title>editor</title>
</head>
<body>
<div id="article">
<div class="article-entry">
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
<script type="text/javascript">
var content ="**hbdjlabdaw**"; //使用el表达式获取后台返回的markdown内容
var converter = new showdown.Converter(); //初始化转换器
var htmlcontent = converter.makeHtml(content); //将MarkDown转为html格式的内容
$("#article .article-entry").html(htmlcontent);//添加到 div 中 显示出来
</script>
</body>
</html>
显示图
2.png
