marked 用户手册 在线查看

最新推荐文章于 2024-07-27 09:56:01 发布
最新推荐文章于 2024-07-27 09:56:01 发布
阅读量548 收藏 1
点赞数
分类专栏： marked
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xm_w_xm/article/details/107021962
版权

npm install marked --save 

 要求写一个在线的用户手册，样式

<template>
  <div id="help">
    <!-- <header></header> -->
    <div id="help-aside">
      <div id="help-aside-1">
        <span class="xian"></span>
        <span class="zi">帮助索引</span>
        <span class="xian"></span>
      </div>
      <ul v-for="(item,idx) in sideData" id="help-tree" :key="idx">
        <li @click="clickMenu(item.name,item,$event)">
          <span
            v-show="item.children&&!item.collapse"
            class="icon-add"
            @click="item.collapse=!item.collapse"
          ></span>
          <span
            v-show="item.children&&item.collapse"
            class="icon-minus"
            @click="item.collapse=!item.collapse"
          ></span>
          <span
            v-show="urlName==item.name&&!item.children"
            class="icon-click"
            @click="item.collapse=!item.collapse"
          ></span>
          <span class="sidetxt">{{item.label}}</span>
          <ul v-for="(item1,idx1) in item.children" :key="idx1" v-show="item.collapse">
            <li @click="clickMenu(item1.name,item1,$event)">
              <span
                v-show="urlName==item1.name&&!item1.children"
                class="icon-click"
                @click="item1.collapse=!item1.collapse"
              ></span>
              <span
                class="sidetxt"
                :class="{ clicktxt:urlName==item1.name&&!item1.children}"
              >{{item1.label}}</span>
              <ul v-for="(item2,idx2) in item1.children" :key="idx2">
                <li @click="clickMenu(item2.name,item2,$event)">
                  <span style="margin-left:36px;font-size:16px;">{{item2.label}}</span>
                  <ul v-for="(item3,idx3) in item2.children" :key="idx3">
                    <li @click="clickMenu(item3.name,item3,$event)">
                      <span class="sidetxt" style="margin-left:50px;font-size:14px;">{{item3.label}}</span>
                      <ul v-for="(item4,idx4) in item3.children" :key="idx4">
                        <li @click="clickMenu(item4.name,item4,$event)">
                          <span
                            class="sidetxt"
                            style="margin-left:65px;font-size:14px;"
                          >{{item4.label}}</span>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="help-content" v-show="!isAvi">
      <!--<vue-markdown>{{mdString}}</vue-markdown>-->
      <div style="width:80%;height:97%;margin:0 auto;">
        <div
          v-html="compiledMarkdown"
          style="text-align: center;padding-top: 100px;"
          v-if="$route.query.name == 'help'"
        ></div>
        <div v-html="compiledMarkdown" v-if="$route.query.name != 'help'"></div>
        <div id="help-content-foot" v-if="$route.query.name == 'help'">
          <div style="height: 550px;line-height: 60px; font-weight: 600; font-size: 30px;">
            应急管理系统普查任务
            清查工作手册
          </div>
          <div style="height: 40px;">应急管理部</div>
          <div>2020年6月</div>
        </div>
      </div>

      <div id="backToBtn" @click="backToTop"></div>
    </div>
    <div v-if="isAvi" id="player-container">
      <player-view :tag="urlName" :label="tagName"></player-view>
    </div>
  </div>
</template>
<script>
import axios from "axios";
// import VueMarkdown from "vue-markdown"; // production
import marked from "marked";
import Header from "../index/children/header";
export default {
  name: "help",
  components: {
    // VueMarkdown,
    marked,
    Header
  },
  data() {
    return {
      sideTheme: "light", //侧边栏样式
      sideData: [], //侧边栏数据
      mdString: "#  全国自然灾害综合风险普查",
      urlName: "", //url的组件名称
      urlOrigin: "", //url
      tagName: "", //tag,
      isAvi: false
    };
  },
  watch: {
    // $route: function (to, from) {
    //   if (to.name == from.name) {
    //     var queryString = to.fullPath.split("?")[1];
    //     this.urlName = queryString.split("=")[1];
    //     this.getHelpMd();
    //   }
    // }
  },
  computed: {
    compiledMarkdown: function() {
      return marked(this.mdString, {
        sanitize: true
      });
    },
    currentRouter: function() {
      return this.$route.name;
    }
  },
  mounted() {
    this.getHelpJSON().then(res => {
      this.sideData = res.data;
      this.getUrlName(); //初始化获取文件
    });
    this.urlOrigin = window.location.origin;
    // console.log(window.location.hash.split("name=")[1], "window.location.hash");
    console.log(this.$route.name, "window.location.hash");
  },
  methods: {
    getHelpJSON: function() {
      return axios({
        url: "./static/helps/helpmarked/help.json",
        method: "get"
      });
    },
    getHelpFile: function(tag, name) {
      let tempURL = "";
      if (tag) {
        tempURL = "./static/helps/helpmarked/" + tag + "/" + name + ".md";
      } else {
        tempURL = "./static/helps/helpmarked/" + name + ".md";
      }
      return axios({
        url: tempURL,
        method: "get"
      });
    },
    // 帮助初始化 获取名称
    getUrlName: function() {
      // this.sideData = helpMenu;
      // var obj2 = this.util.getUrlParams();
      // if (obj2 && obj2.name) {
      //   this.urlName = obj2.name;
      //   this.getHelpMd();
      // } else {
      //   this.getHelpInit();
      // }
      this.getHelpInit();
    },
    getHelpInit() {
      if (typeof this.$route.params.currenturl == "undefined") {
        this.urlName = "help";
      } else {
        this.urlName = this.$route.params.currenturl.name; //获取url名称
      }
      this.getHelpMd();
    },
    // 请求md文件
    getHelpMd() {
      this.getHelpFile(this.tagName, this.urlName).then(data => {
        //请求文件
        this.mdString = data.data;
      });
      this.$router.push({
        name: "help",
        query: {
          name: this.urlName
        }
      });
    },
    // 解决侧边栏父子重叠问题
    clickMenu(name, data, e) {
      console.log(name, data, e, "clickMenu");
      //   if (SewisePlayer.doStop) {
      //     SewisePlayer.doStop();
      //   }

      if (data.drop) {
        let children = null;
        if (data.children[0].drop) {
          children = data.children[0].children[0];
        } else {
          children == data.children[0];
        }
        this.urlName = children.name;
        this.tagName = children.tag;
      } else {
        this.urlName = data.name;
        this.tagName = data.tag;
      }

      if (data.label.indexOf(".avi") != -1) {
        this.isAvi = true;
        this.$router.push({
          name: "help",
          query: {
            name: this.urlName
          }
        });
      } else {
        this.isAvi = false;
        this.getHelpMd();
      }

      this.stopPropagation(e);
    },
    stopPropagation: function(e) {
      var e = arguments[0] || e || window.event;
      if (e.stopPropagation) {
        //W3C阻止冒泡方法
        e.stopPropagation();
      } else {
        e.cancelBubble = true; //IE阻止冒泡方法
      }
      return true;
    },
    // 跳转至用户反馈模块 - GYJ
    toFeedback() {
      this.$router.push({
        name: "feedback"
      });
    },
    backToTop() {
      var container = document.getElementById("help-content");
      container.scrollTop = 0;
    }
  }
};
</script>
<style scoped>
#help {
  width: 100%;
  height: 100%;
  text-align: left;
}
#help img {
  max-width: 70%;
  max-height: 70%;
  display: block;
  margin: 0 auto;
}
#help-aside {
  width: 350px;
  position: absolute;
  top: 70px;
  bottom: 0;
  left: 0;
  background: #fff;
  overflow: auto;
  border-right: 10px solid #ebecf2;
}
#help-aside-1 {
  width: 260px;
  height: 30px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 20px;
}

.xian {
  display: block;
  float: left;
  width: 100px;
  height: 20px;
  margin-top: 10px;
  border-bottom: 1px solid rgb(37, 146, 242);
}
.zi {
  display: block;
  float: left;
  width: 60px;
  height: 20px;
  margin-top: 20px;
  color: rgb(37, 146, 242);
  font-size: 14px;
  text-align: center;
}
ul,
li {
  color: #2c3e50;
  line-height: 26px;
  list-style: none;
}
#help-tree {
  width: 260px;
  margin: 0 auto;
  margin-top: 10px;
  /* padding-left: 50px; */
}
#help-content {
  position: absolute;
  left: 400px;
  top: 70px;
  right: 0px;
  bottom: 0px;
  padding: 0 30px;
  overflow: auto;
  background-color: #fff;
}
.icon-add {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../../assets/images/help/help-add.png");
  cursor: pointer;
}
.icon-minus {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../../assets/images/help/help-minus.png");
  cursor: pointer;
}
.icon-click {
  display: inline-block;
  width: 7px;
  height: 10px;
  background: url("../../assets/images/help/help-arrow.png");
  cursor: pointer;
}
.clicktxt {
  color: #2592f2;
}
.sidetxt {
  margin-left: 5px;
  font-size: 14px;
  cursor: pointer;
}
.sidetxt:hover {
  color: #2592f2;
}

#help-content-foot {
  margin-top: 87px;
  margin-bottom: 100px;
  font-size: 17px;
  margin-left: 200px;
  padding-bottom: 21px;
  padding-top: 20px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  /* border-top: 1px solid #bbb; */
}
#backToBtn {
  width: 52px;
  height: 52px;
  position: fixed;
  right: 20px;
  bottom: 30px;
  cursor: pointer;
  background: url("../../assets/images/help/backTo.png");
}
#player-container {
  position: absolute;
  left: 390px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  overflow: auto;
  background-color: #fff;
}
</style>
<style>
/* 用于帮助的样式 */

/* #help img {
  max-width: 70%;
  max-height: 70%;
  margin: 30px 20px 0px;
} */
#help img {
  max-width: 100%;
  max-height: 70%;
  display: block;
  margin: 0 auto;
}

#help img[alt="操作按钮"] {
  display: inline;
  line-height: 50px;
  margin: 0 2px;
}

#help img[alt="通知公告"] {
  display: inline;
  vertical-align: middle;
  /* line-height: 50px; */
  max-width: 100px;
  /* margin: 0 2px; */
}

#help img[alt="删除按钮"] {
  display: inline;
  /* line-height: 50px; */
  margin: 0 2px;
}

#help img[alt="普查区按钮"] {
  display: inline;
  vertical-align: middle;
  /* line-height: 50px; */
  max-width: 100px;
  /* margin: 0 2px; */
}

#help img[alt="用户权限"] {
  display: inline;
  vertical-align: middle;
  /* line-height: 50px; */
  max-width: 100px;
  /* margin: 0 2px; */
}

#help img[alt="缩放按钮"] {
  display: inline;
  margin-left: 50px;
  vertical-align: middle;
}

#help img[alt="切换按钮"] {
  display: inline;
  margin-left: 50px;
  vertical-align: middle;
}

#help img[alt="测量面控按钮"] {
  display: inline;
  margin-left: 50px;
  vertical-align: middle;
}

#help img[alt="放大按钮"] {
  display: inline;
  margin-left: 50px;
  vertical-align: middle;
}

#help img[alt="缩小按钮"] {
  display: inline;
  margin-left: 77px;
  vertical-align: middle;
}

#help img[alt="导出导入"] {
  display: inline;
  vertical-align: middle;
  /* line-height: 50px; */
  max-width: 100px;
  /* margin: 0 2px; */
}

#help img[alt="编辑"] {
  display: inline;
  /* margin-left: 50px; */
  vertical-align: middle;
}

#help h1 {
  font-size: 28px;
  line-height: 50px;
}

#help h2 {
  margin-left: 20px;
  font-size: 20px;
  line-height: 50px;
  color: #2d8cf0;
}

#help h3 {
  margin-left: 20px;
  font-size: 16px;
  line-height: 50px;
}

#help h5 {
  margin-left: 20px;
  font-size: 14px;
  color: gray;
  margin-left: 28%;
}

#help h6 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 15px;
}

#help p {
  margin-left: 20px;
  font-size: 14px;
  line-height: 50px;
}

#help ul,
#help li {
  list-style: none;
  margin-left: 25px;
}

#help #help-tree ul,
#help #help-tree li {
  margin-left: 0px;
}

#help code {
  color: #c7254e;
  background-color: #f9f2f4;
  border: 1px solid #ffa500;
  border-radius: 4px;
  padding: 3px 5px;
}

#help p {
  text-indent: 2em;
}

#help tr {
  font-size: 14px;
}

#help div.sewise-player-ui div.controlbar ul.controlbar-btns {
  position: absolute;
  width: 100%;
  top: 20px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  list-style-type: none;
}

#help .sewise_player_contextmenu_items {
  display: none;
}
</style>

在static下的目录 

 其中一个md 的文件

# 6 清查地图使用
---
（1）查询清查对象信息：可以通过【清查对象地图】进行信息查询。例如：点击【地区】下的“北京市”，【类别】下的“自然灾害承灾体”“公共服务设施”“学校”来查询北京市的学校目录；还可以通过关键字输入查询具体调查对象。

（2）通过查看【地图】【影像】【地形】三种模式的底图，方便核对清查对象点位信息。

（3）查看清查机构：使用【清查机构管理】，省、市、县可查看清查机构树状结构，县级用户可创建清查机构。

![图3-23](static/helps/helpimgs/3-23.png)

![图3-24](static/helps/helpimgs/3-24.png)

![图3-25](static/helps/helpimgs/3-25.png)

![图3-26](static/helps/helpimgs/3-26.png)

![图3-27](static/helps/helpimgs/3-27.png)

![图3-28](static/helps/helpimgs/3-28.png)

![图3-29](static/helps/helpimgs/3-29.png)


######  图6-1 清查地图使用界面

help.json

[
  {
    "label": "一、 清查软件实操",
    "name": "xitong_1",
    "collapse": true,
    "children": [
      {
        "label": "(一).系统登录",
        "tag": "xitong",
        "name": "xitong_1"
      },
      {
        "label": "(二) 用户管理",
        "tag": "yongh",
        "name": "yongh_1"
      },
      {
        "label": "(三) 批量导入方式",
        "tag": "pldrfs",
        "name": "pldrfs_1"
      },
      {
        "label": "(四) 逐项填报方式",
        "tag": "zxtbfs",
        "name": "zxtbfs_1"
      },
      {
        "label": "(五) 数据审核、上报、修改",
        "tag": "sjsh",
        "name": "sjsh_1"
      },
      {
        "label": "(六) 清查地图使用",
        "tag": "dtsy",
        "name": "dtsy_1"
      }
    ]
  }
]

# 相当于h1   ## 相当于h2  ### 相当于h3  以此类推   具体可看这个

https://maxiang.io/#%E4%BB%A3%E7%A0%81%E5%9D%97

 

侧耳倾听...
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
marked.js简易手册
weixin_30423977的博客
12-26 1126
marked.js简易手册 本文介绍的是marked.js。秉持“来之即用”的原则，对它进行简要的翻译和归纳， 安装 在网上引用或者是引用本地文件即可。要么就用命令行： npm install marked --save 最简单用法 var rendererMD = new marked.Renderer(); marked.setOptions({ rendere...
markdown 中文文档
LeonSUST的博客
12-04 3777
Markdown: 语法 概述 设计理念 内联 HTML 特殊字符自动转义 块级元素 段落和换行 标题 块引用 列表 代码块 水平线 内联元素 链接 强调 代码 图片 其他 反斜杠转义 自动链接 说明: 本文翻译自 John Gruber 的博客, 托管于Github. 概述 设计理念 Markdown 致力于使阅读和创作文档变得容易. Markdown 视可读性为最高准则. ...
vue中使用Marked实现预览md文件（base64编码图片）
最新发布
m0_59415345的博客
07-27 1339
在上一篇vue-markdown实现预览md文件时，后端返回的图片格式是base64格式的，试了很多方法都不能显示，因此换成了marked插件进行预览，同时也支持显示大纲目录。markedmarked的如果不确定md内容能否展示的，可以先在这上面试运行一下，如果可以显示再使用该插件，不然就换插件，节省开发时间。
使用marked.js实现md文档前端显示
qq_22849251的博客
02-27 949
https://github.com/472542625/marked-viewer
c语言 实现markdown解析,marked首页、文档和下载 - Markdown 解析和编译器
weixin_39994270的博客
05-20 188
marked 是一个 JavaScript 编写的全功能Markdown解析和编译器。marked 的目的是快速的编译超大块的Markdown文本而不必担心结果会出乎意料或者花费很长时间。marked 最初是为 Node.JS编写，现在已完全兼容客户端浏览器。新版本号称速度比C语言写的Markdown转换工具Discount还要快。Benchmarks:node v0.4.x:$ node ...
Vue中使用Marked版本比较
Source
11-12 567
Vue中使用Marked版本比较
简单的Markdown功能实现——marked模块的使用
weixin_34248487的博客
12-06 532
marked是一个markdown 解析、编译器，通过引入marked模块，可以实现一个简单的markdown编辑器。使用方式如下： Install 新建一个项目文件夹，在项目中下载marked模块 Usage 新建一个marked.js文件，引入marked 模块，并使用。 option配置 参数说明： -o, –output [output]: 指定输出文件，默认...
AS2021 Training Guide(marked).pdf
01-15
【描述】：这是一份关于Advance Steel 2021最新版的基础操作手册，旨在帮助用户了解并掌握该软件的基本功能。 【标签】：asterisk 【部分内容】：文档提到了GRAITEC公司为Autodesk Advance Steel 2021准备的训练...
AS2021 IntermediateTraning Guide(marked).pdf
01-15
《Advance Steel 2021 中级培训指南》是一份专为用户提供的详细操作手册，旨在帮助用户深入了解Autodesk Advance Steel 2021的新功能和操作方法。这份文档不仅涵盖了软件的基础介绍，还可能涉及一些用户未购买的模块...
实用汉英外贸翻译手册.doc
10-11
《实用汉英外贸翻译手册》主要涉及对外贸易中询盘（Inquiry）这一关键环节的中文与英文翻译，包括标价、参考价以及如何询问和表达对商品的兴趣。以下是相关知识点的详细说明： 1. 标价（mark a price/carry a price...
QEMU 使用手册（英文）
Tangent's blog
06-14 2648
获取方法： man qemu|multimarkdown>qemu-manual.html 手册内容： QEMU(1) QEMU QEMU(1) NAME qemu - QEMU User Documentation SYNOPSIS qemu-system-x86_64 [options] [disk_image] DESCRIPTION The QEMU PC System emulator simulates the following peripherals: • i440FX host P
HP-TFT-7600用户手册
10-14
HP KVM TFT-7600用户手册 Introduction ................................................................................................................................. 5 Introduction .....................
Marked.js让您的文档编辑更加轻松自如！
cybozu的博客
11-22 4573
低代码应用平台，虽然有文本编辑框，可以对内容进行编辑提高易读性。但是还是有不少人觉得如果能够使用Markdown编辑，将更加轻松，文本也将更加美观。※特别受程序员的欢迎
marked扩展语法（增加自定义表情）
大大橘子的博客
06-22 4297
背景 最近在移植WordPress的Sakura主题到Halo上（实际上只是参照样式重写了）。评论这里需要使用marked，Halo官方提供的表情不太适合我，且我早就想扩展一个带表情的marked了。因此正好借着这个机会，扩展一个带表情的marked。 后续也想扩展一下文章页面的marked，只是目前还没有插件。因此暂时先只改评论的即可，到时候通用一套语法即可。 【注：当前文章大部分内容为分析，篇幅较长，如果不想看过程，直接跳转至扩展即可】 本篇文章基于如下内容 marked.js：https://git
NPM 使用介绍
技术之路
08-09 578
转载自下面的链接 NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。 由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。
解析markdown文档并且代码高亮
苏木的博客
09-28 1237
解析markdown文档并且代码高亮
使用marked和highlight.js对GPT接口返回的代码块渲染，高亮显示，支持复制，和选择不同的高亮样式
burgessbin的博客
07-14 4396
使用marked和highlight.js对GPT接口返回的代码块渲染，高亮显示，支持复制，和选择不同的高亮样式
html直接使用marked.js解析marked文档
王兆镇的博客
03-17 2247
<!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/marke
自定义代码块样式，基于marked与自定义指令动态增加语言显示与copy功能
通往未来的路
08-30 942
这里将具体的实现分为两步：静态绘制与动态注册。 首先是静态绘制，利用在markdown转html的时候的返回结果，将其中的pre标签进行注入一个自定义标签用于占位，以方便后续的操作。 第二步是动态注册，在已有元素的基础上进行动态值与函数的设置与注册。
react marked
05-31
React-Marked是一个React组件，用于在React应用程序中使用Markdown语法渲染文本。它是基于Marked库构建的，可以将Markdown文本解析为HTML，并将其呈现在React组件中。使用React-Marked，开发者可以快速轻松地将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

侧耳倾听...

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值