Markdown

作者: 凤非飞 | 来源:发表于2019-03-16 17:11 被阅读0次

Markdown提升逼格
三分钟学会常用MarkDown语法
学习小组Day1笔记--任重道远
markdown
GitBook
无标题文章
markdown测试
github_markdown语法大全整理
MARKDOWN学习笔记
test

在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