JavaFX:集成MarkDown

最新推荐文章于 2025-03-03 12:33:08 发布

xhBruce

最新推荐文章于 2025-03-03 12:33:08 发布

阅读量1.1k

点赞数

分类专栏： # JavaFX Java 文章标签： JavaFX MarkDown

本文为博主经验积累

本文链接：https://blog.csdn.net/qq_23452385/article/details/119846723

版权

Java 同时被 2 个专栏收录

113 篇文章

订阅专栏

JavaFX

34 篇文章

订阅专栏

JavaFX:集成MarkDown

相关软件：Typora、Atom文本编辑器、MWeb、Quiver
相关网址：Markdown 中文网、Markdown 教程
相关开源项目：Editor.md：开源在线 Markdown 编辑器、yanxingang / MarkDown笔记本、lcpsky / note、MarkDown工具包

了解MarkDown

markdown - 百度百科，Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。也就是Markdown是一个标准，按照标准有.md或.markdown扩展名文本文件。

在这里插入图片描述

按照Markdown标准的.md或.markdown扩展名文本文件
在Markdown应用程序（解析器）中打开Markdown文件
使用Markdown应用程序将Markdown文件转换为HTML文档
在网络浏览器中查看HTML文件，或使用Markdown应用程序将其转换为其他文件格式，例如PDF
（相关解析器博客使用 java 实现一个简单的 markdown 语法解析器）

MarkDown常用语法

Markdown备忘表 Markdown语法快速参考
 MarkDown语法备忘
 Markdown 教程

解析MarkDown语法

使用 marked插件、Editor.md：开源在线 Markdown 编辑器或 commonmark-java，单独造轮子太麻烦~~

marked插件为例：

github上或npm install -g marked下载
直接按照marked wiki中Browser常见html文件浏览器中打开

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked('# Marked in browser\n\nRendered by **marked**.');
  </script>
</body>
</html>

简单编辑

<!DOCTYPE html>
<html>
<head>
    <title>MarkDown解析器</title>
    <meta charset="UTF-8">

    <script src="node_modules/marked/lib/marked.js"></script>
    <script src="node_modules/jquery-3.5.1/jquery-3.5.1.min.js"></script>

    <link rel="stylesheet" href="node_modules/zuidist/css/zui.css">
    <style>
        body{
            padding: 50px;
        }
        #md,#html{
            height: 510px;
        }
        #md{
            resize: none;
        }
        #html{
            border: solid 1px darkgrey;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-lg-6 col-md-6">
                <textarea id="md" class="form-control"  placeholder="请输入Markdown代码"></textarea>
            </div>
            <div id="html" class="col-lg-6 col-sm-6 col-md-6"></div>
        </div>
    </div>
</body>
<script>
    $("#md").on("keyup blur",function () {
        $('#html').html(marked($("#md").val()))
    })
</script>
 
</html>