Hexo引入Mermaid流程图和MathJax数学公式

【Hexo引入Mermaid流程图和MathJax数学公式】的更多相关文章

Hexo引入Mermaid流程图和MathJax数学公式

近来用Markdown写文章,越来越不喜欢插入图片了,一切能用语法解决的问题坚决不放图,原因有二: 如果把流程图和数学公式都以图片方式放到文章内,当部署到Github上后,访问博客时图片加载实在太慢,有时一篇文章需要画10来个流程图,那你就得截图10来多次,还得给这些图片想一个合适的名字,同时插入图片的时候还要注意图片的插入位置和顺序: 如果你要把文章发布到其他博客平台,如CSDN.博客园,在每一个平台上你都要插入10来多次图片,作为程序员,这种笨拙又耗时的方法,我实在不能忍. 于是愤而搜索,M…

在Hexo中渲染MathJax数学公式

最近学机器学习涉及很多的数学公式,公式如果用截图显示,会比较low而且不方便.因此需要对Hexo做些配置,支持公式渲染.同时文末整理了各种公式的书写心得,比如矩阵.大小括号.手动编号.上下角标和多行对其等,有兴趣的可以看看. 通过hexo-math插件安装MathJax 有个插件hexo-math,可以给Hexo博客添加MathJax公式支持,GitHub地址 https://github.com/hexojs/hexo-math 安装方法可其他hexo插件一样,在博客根目录执行npm inst…

markdown mermaid流程图

流程图所有流程图都由节点.几何图像.箭头或线条组成. mermaid代码定义了这些节点和边的制作和交互方式.可以有不同的箭头类型.多向箭头以及与子图的连接. 节点节点 flowchart LR id flowchart LR id 带文字的节点可以在框中设置与id不同的文本.如果多次这样做,将使用的节点的最后一个文本.另外,如果稍后为节点定义边,则可以省略文本定义.之前定义的将在呈现框时使用. flowchart LR node[id text] flowchart LR node[id…

Python 实现 Html 转 Markdown（支持 MathJax 数学公式）

因为需要转 html 到 markdown,找了个 python 的库,该库主要是利用正则表达式实现将 Html 转为 Markdown. 数学公式需要自己修改代码来处理. 我 fork 的项目地址:https://github.com/fipped/tomd 使用方法: 把项目 clone 到当前路径,然后新建一个 python 文件: #coding:utf-8 from tomd import tomd import os # 所有博客 html 文件在目录blog 里 root="blo…

html中使用mathjax数学公式

测试用例: test.html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="./test.css" /> <script type="text/x-mathjax-config"> MathJax.Hub.Config({tex2jax: {inlineMa…

react引入ggEditor流程图

遇到的问题 1.propsAPI获取不到内容:withPropsAPI包裹的组件必须是GGEditor的子组件. 2.自定义组件如何使用:正确的办法是通过config配置,参照上面的代码(之前我在在内部RegisterCommand以后,在onAfterExecuteCommand中截获命令,通过函数控制图例操作.这中间需要下钻到内部组件调用propsAPI,我就通过setState去设置状态传递到子组件.) 3.如何设置拖拽组件:太羞耻了,居然不晓得在Item双标签内放名称. 4.操作流程图后…

hexo博客MathJax公式渲染问题

这个问题自己很早以前便碰到了,用MathJax语法写的一些公式,在本地Markdown编译器上渲染是没问题的,可是部署到hexo博客中就出现问题了,之前我是使用图片代替公式应付过去了,今天从网上找了一下资料,发现了其问题所在,同时也解决了这个问题. 问题 hexo默认使用hexo-renderer-marked引擎去渲染网页,它会把利用Markdown语法写的文本去转换为相应的html标签.在利用Markdown写MathJax公式的时候,经常会用到下划线_表示下标,但是下划线_会被hexo的默…

MathJax: 让前端支持数学公式

文章图片存储在GitHub,网速不佳的朋友,请看<MathJax:让前端支持数学公式> 或者来我的技术小站 godbmw.com 1. 必须要说 1.1 开发背景博主使用Vue开发的个人博客,博文使用markdown语法编写,然后交给前端渲染.为了更方便的进行说明和讲解,需要前端支持LaTex的数学公式,并且渲染好看的样式. 1.2 效果展示数学公式分为行内公式和跨行公式,当然都需要支持和渲染. 我准备了3条公式,分别是行内公式.跨行公式和超长的跨行公式: $\alpha+\beta=\…

Hexo博客美化之蝴蝶(butterfly)主题魔改

Hexo是轻量级的极客博客,因为它简便,轻巧,扩展性强,搭建部署方便深受广大人们的喜爱.各种琳琅满路的Hexo主题也是被各种大佬开发出来,十分钦佩,向大佬仰望,大声称赞:流批!!! 我在翻看各种主题后,便选择了蝴蝶这个主题,蝴蝶主题是由大佬Jerry制作的,其简洁,具有现代风格,扩展强,配置简单明了将我所吸引. 效果图: 蝴蝶主题github 于是我按照主题的文档完成主题配置,参照其他butterfly使用者,又添加了一点魔改.为了方便大家,减少配置上花的时间,我就把脚手架代码放到gitee…

hexo 搭建静态博客 + Next 主题配置

参考手册 HEXO:https://hexo.io/zh-cn/ NEXT:http://theme-next.iissnan.com/ 安装hexo npm install hexo-cli -g 或者可以局部安装 hexo npm install hexo -S 初始化博客 hexo init xxx 或者进入到一个空文件夹里,执行:hexo init 网站配置文件详解 # Hexo Configuration ## Docs: https://hexo.io/docs/configurat…

一款被大厂选用的 Hexo 博客主题

首先这是一篇自吹自擂的文章,主题是由多位非前端程序员共同开发,目前经过一年半的迭代已经到达 v1.8.0 版本,并且获得大量认可,甚至某大厂员工已经选用作为内部博客,因此我决定写这篇文章向更多人安利它. 什么是 Hexo ? Hexo 是一个快速.简洁且高效的博客框架,基于 Node.js 开发.Hexo 使用 Markdown 解析文章,并生成静态页面,非常便于静态部署和加载,许多人把页面存在 GitHub Pages 或 OSS 上,连服务器都省了. Hexo 开发社区也非常活跃,贡献了有…

Hexo+NexT（三）：Next主题配置详解

阅读本篇之前,假定读者已经有了Node.js的基础,如需要补充Node.js知识的,请自行百度. Hexo是在Node.js框架下的一个项目,利用Node.js提供的强大功能,完成从Markdown到静态网页的转换. NexT是Hexo项目下的一个主题插件,提供可高度定制的页面外观. 本文章对NexT主题配置文件_config.yml中的配置进行详细的讲解. Hexo博客专题索引页 1. NexT主题配置文件详解 Hexo版本-3.8.0,NexT版本-5.1.4 NexT主题配置文件详解 #…

Linux 桌面玩家指南：12. 优秀的文本化编辑思想大碰撞（Markdown、LaTeX、MathJax）

特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之间的内容按照数学公式进行排版,从而导致评论区格式混乱.如果大家的评论中用到了$,但是又不是为了使用数学公式,就请使用\$转义一下,谢谢. 想从头阅读该系列吗?下面是传送门: Linux 桌面玩家指南:01. 玩转 Linux 系统的方法论 Linux 桌面玩家指南:02. 以最简洁的方式打造实用的…

Mermaid 学习

基础在 VS code 中安装插件 Markdown Preview Mermaid Support,则便可支持 Mermaid 流程图 flowchart graph LR; A-->B; A-->C; B-->D; C-->D; 时序图 sequence diagram sequenceDiagram participant Alice participant Bob Alice->John:Hello John, how are you? loop Healthche…

Markdown Mermaid

Mermaid 是一个用于画流程图.状态图.时序图.甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中. 之前用过 PlantUML,但是发现这个东西的实现原理是生成 UML 的图片后上传服务端,每次再从服务端读取,因此觉得不够鲁棒,隐私性也不好,因而弃用. Mermaid 作为一个使用 JS 渲染的库,生成的不是一个"图片",而是一段 HTML 代码,因此安全许多. 接下来介绍 Mermaid 的流程图及序列图的语法,也就是大家在工作中常使用的图表. 官…

什么是Hexo博客

Hexo 是一个基于nodejs 的静态博客网站生成器,作者是来自台湾的Tommy Chen. 特点: 不可思议的快速 ─ 只要一眨眼静态文件即生成完成支持 Markdown 仅需一道指令即可部署到 GitHub Pages 和 Heroku 已移植 Octopress 插件高扩展性.自订性兼容于 Windows, Mac & Linux Hexo官网安装 1.全局安装Hexo-cli脚手架 npm install hexo-cli -g 2.初始化你的博客 hexo init blog…

Linux 桌面玩家指南：19. 深入理解 JavaScript，及其开发调试工具

特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之间的内容按照数学公式进行排版,从而导致评论区格式混乱.如果大家的评论中用到了$,但是又不是为了使用数学公式,就请使用\$转义一下,谢谢. 想从头阅读该系列吗?下面是传送门: Linux 桌面玩家指南:01. 玩转 Linux 系统的方法论 Linux 桌面玩家指南:02. 以最简洁的方式打造实用的…

工作效率-十五分钟让你快速学习Markdown语法到精通排版实践备忘

关注「WeiyiGeek」公众号设为「特别关注」每天带你玩转网络安全运维.应用开发.物联网IOT学习! 希望各位看友[关注.点赞.评论.收藏.投币],助力每一个梦想. 文章目录: 0x00 前言简述 Markdown 初识 Markdown 特点 Markdown 客户端 0x01 语法学习段落换行目录标题文字标记.粗体.斜体上下划线.分割线.上下标表格有序.无序.任务列表链接.锚.缩写.脚注.引用图片.音乐.视频.地图.内容折叠嵌入代码特殊符号.Emoji 位置.字体.字…

Markdown基本语法

Markdown 基本语法记录 # 欢迎使用 Cmd Markdown 编辑阅读器 ------ 我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,**Cmd Markdown** 是我们给出的答案 -- 我们为记录思想和分享知识提供更专业的工具. 您可以使用 Cmd Markdown: > * 整理知识,学习笔记 > * 发布日记,杂文,所见所想 > * 撰写发布技术文稿(代码支持) > * 撰写发布学术论文(LaTeX 公式支持) ![cm…

Markdown编辑器editor.md的使用---markdown上传图片

http://kindeditor.org/ 确定下有没有查找替换功能 http://pandao.github.io/editor.md/ http://pandao.github.io/editor.md/examples/html-preview-markdown-to-html.html https://github.com/helloworldtang/spring-boot-rte-study 一.Markdown和editor.md简介: Markdown在技术圈里(估计更多是程序…

Linux 桌面玩家指南：05. 发博客必备的图片处理和视频录制神器

特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之间的内容按照数学公式进行排版,从而导致评论区格式混乱.如果大家的评论中用到了$,但是又不是为了使用数学公式,就请使用\$转义一下,谢谢. 想从头阅读该系列吗?下面是传送门: Linux 桌面玩家指南:01. 玩转 Linux 系统的方法论 Linux 桌面玩家指南:02. 以最简洁的方式打造实用的…

Typora中的Markdown教程

Tutorial of markdown in Typora 工欲善其事,必先利其器如上所说,这里给大家安利一款高BIG的利器Typora,这是一款文艺青年(装逼)必备的用于编写markdown的打造高质量文档的神器,一打开就有被惊艳到,界面设计使用程序猿最爱的极简风格,清新脱俗,出淤泥而不染(已经彻底沦陷),可以让人集中注意力去构思文档的编写而不用被格式问题所烦扰.支持LaTex公式编辑,Mermaid流程图和甘特图绘制等等. 合理的创建标题,有助于目录的生成输入1次#,并按下space后…

Markdown使用方法

目录 Markdown 简明语法手册 1. 斜体和粗体 2. 分级标题这是一个一级标题这是一个二级标题这是一个三级标题 3. 外链接 4. 无序列表 5. 有序列表 6. 文字引用 7. 行内代码块 8. 代码块 9. 插入图像 Cmd Markdown 高阶语法手册 1. 内容目录 2. 标签分类 3. 删除线 4. 注脚 5. LaTeX 公式 6. 加强的代码块 7. 流程图 8. 序列图 9. 甘特图 10. Mermaid 流程图 11. Mermaid 序列图 12. 表格支持…

NexT 个性化设置

NexT 主题添加分类页面新建页面在本地使用终端 cd 到 blog 文件夹下,执行如下命令: $ cd Documents/blog $ hexo new page categories 设置页面编辑 source/categories/index.md : --- title: categories date: 2018-04-09 13:15:42 type: "categories" layout: "categories" comments: fal…

Markdown 简明语法手册 - 作业

目录 Cmd Markdown 简明语法手册 1. 内容目录 2. 标签分类 3. 删除线水平线--- 1. 斜体和粗体 2. 分级标题标题1 标题2 标题3 3. 外链接 4. 无序列表 5. 有序列表 6. 文字引用 7. 行内代码块 8. 代码块 9. 插入图像 Cmd Markdown 高阶语法手册 6. 加强的代码块 7. 流程图 8. 序列图 9. 甘特图 10. Mermaid 流程图 11. Mermaid 序列图 12. 表格支持 13. 定义型列表 14. Html 标签…

Markdown编辑器的使用

版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/LoveJavaYDJ/article/details/73692917 一.Markdown和editor.md简介:Markdown在技术圈里(估计更多是程序猿吧)越来越流行.简单的语法,统一的格式,使用过程中,手基本上不用从键盘上移到鼠标上去,超级方便.写好了一篇md文档(也就是含Markdown语法格式的普通TXT文件),可以随意放到别的支持Markdown格式的网站上发布. editor.…