写了一个很简易的Markdown编辑器
这个编辑器是去年写的，是用来写微信推文的
今天又给重新修改了一下，也可以说是迁移了一下
之前是和旧版的博客系统管理中心写在一起的
抽离出来单独成为一个项目了
针对微信代码块显示做了适配
尝试了多种方式实现代码块的行号显示，但多数都失败了
最后是仿照微信自带编辑器的方式实现的，所以行号没有固定，后面有时间再优化吧
对了，这是一个Vue3项目，用Webstorm傻瓜式创建，无需其他配置，只需添加npm依赖即可
这里把源代码贴一下，我的实现方法很愚蠢，所以效率稍低
目录里面有但是没贴代码的就是我没改过的
目录结构
│ babel.config.js
│ jsconfig.json
│ package.json
│ vue.config.js
│ yarn.lock
│
├─public
│ index.html
│
└─src
│ App.vue
│ main.js
│
├─pages
│ └─editor
│ │ creator.js
│ │ editor.vue
│ │ explain.js
│ │ md.js
│ │ style.js
│ └─katex
│ katex.css
│
└─router
router.js
shellindex.html
//index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="https://hyz.cool/public/R/img/link.jpg">
<title>续加仪的Markdown编辑器</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<style>
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
border-radius: 3px;
background: #a9b8d345;
box-shadow: inset 0 0 5px rgba(0,0,0,0.08);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 3px;
background: #66838d6e;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>
</html>
htmlpackage.json
{
"name": "xjy-markdown-editor",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"clipboard": "^2.0.10",
"core-js": "^3.8.3",
"element-plus": "^2.1.11",
"highlight.js": "^11.5.1",
"katex": "^0.13.13",
"vue": "^3.2.13",
"vue-router": "^4.0.14"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@highlightjs/vue-plugin": "^2.1.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-service": "~5.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
javascriptApp.vue
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
body{
padding: 0;
margin: 0;
overflow: hidden;
max-height: 100vh;
}
</style>
htmlmain.js
import {createApp} from 'vue'
import {createRouter,createWebHistory} from "vue-router"
import App from './App.vue'
import {routes} from "./router/router"
import 'element-plus/dist/index.css'
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
const app = createApp(App)
app.use(router)
app.mount('#app')
javascriptrouter.js
import Editor from "../pages/editor/editor"
export const routes=[
{
pathname:"/",
component:Editor
}
]
javascripteditor.vue
<template>
<div class="editor-box">
<div class="left-box" id="left-box">
<div id="editor-view" class="editor-view">
<textarea id="editor" class="editor" spellcheck="false" maxlength="100000" @focus="onFocus"
v-model="value" @input="onInput"/>
</div>
<div style="display: flex;margin-left: 18px;">
<div style="margin: 0 15px">输入行数：{{inputLineNum}}</div>
<div>输入字符数：{{inputNum}}</div>
</div>
</div>
<div class="right-box" id="right-box">
<div class="view-box">
<div class="view" id="view">
<section id="view-section"/>
</div>
<div style=" display: flex; margin-left: 18px;">
<div style="margin: 0 15px">行数：{{textLineNum}}</div>
<div>字数：{{textNum}}</div>
</div>
</div>
<div>
<div id="copy-wechat" type="primary" @click="copy('copy-wechat','view-section')"
data-clipboard-target="#view-section" style="margin : 20px 5px 0 0;cursor: pointer;">
<img src="https://res.wx.qq.com/a/fed_upload/9300e7ac-cec5-4454-b75c-f92260dd5b47/logo-mp.ico"
height="50" width="50"/>
</div>
<el-tooltip class="item" effect="dark" :content="viewType=='PHONE'?'Web预览':'手机预览'" placement="left">
<div style="margin : 20px 5px 0 0;cursor: pointer;" @click="changeViewType">
<div v-if="viewType=='PHONE'">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="50" height="50">
<path d="M512.3072 883.3024c-41.2672 0-74.8544-33.5872-74.8544-74.8544s33.5872-74.8544 74.8544-74.8544 74.8544 33.5872 74.8544 74.8544S553.5744 883.3024 512.3072 883.3024zM512.3072 770.4576c-20.992 0-37.9904 16.9984-37.9904 37.9904s16.9984 37.9904 37.9904 37.9904 37.9904-16.9984 37.9904-37.9904S533.1968 770.4576 512.3072 770.4576z"
p-id="1256"></path>
<path d="M680.1408 991.9488c-3.1744 0-6.4512-0.8192-9.4208-2.56-41.2672-24.4736-108.032-24.3712-108.7488-24.3712 0 0-0.1024 0-0.1024 0L276.8896 965.0176c-54.3744 0-98.5088-44.2368-98.5088-98.5088L178.3808 140.3904c0-54.3744 44.2368-98.5088 98.5088-98.5088l470.7328 0c54.3744 0 98.5088 44.2368 98.5088 98.5088l0 726.1184c0 54.3744-44.2368 98.5088-98.5088 98.5088-10.1376 0-18.432-8.2944-18.432-18.432s8.2944-18.432 18.432-18.432c33.9968 0 61.6448-27.648 61.6448-61.6448L809.2672 140.3904c0-33.9968-27.648-61.6448-61.6448-61.6448L276.8896 78.7456c-33.9968 0-61.6448 27.648-61.6448 61.6448l0 726.1184c0 33.9968 27.648 61.6448 61.6448 61.6448l284.8768 0c4.1984 0 78.0288-0.1024 127.7952 29.4912 8.704 5.2224 11.6736 16.4864 6.4512 25.2928C692.5312 988.7744 686.4896 991.9488 680.1408 991.9488z"
p-id="1257"></path>
<path d="M589.824 149.7088 434.7904 149.7088c-10.1376 0-18.432-8.2944-18.432-18.432s8.2944-18.432 18.432-18.432L589.824 112.8448c10.1376 0 18.432 8.2944 18.432 18.432S599.9616 149.7088 589.824 149.7088z"
p-id="1258"></path>
<path d="M705.024 230.0928c9.728 0 17.7152 7.8848 17.7152 17.7152l0 376.9344c0 9.728-7.8848 17.7152-17.7152 17.7152L319.5904 642.4576c-9.728 0-17.7152-7.8848-17.7152-17.7152L301.8752 247.808c0-9.728 7.8848-17.7152 17.7152-17.7152L705.024 230.0928M705.024 193.2288 319.5904 193.2288c-30.1056 0-54.5792 24.4736-54.5792 54.5792l0 376.9344c0 30.1056 24.4736 54.5792 54.5792 54.5792l385.4336 0c30.1056 0 54.5792-24.4736 54.5792-54.5792L759.6032 247.808C759.6032 217.7024 735.1296 193.2288 705.024 193.2288L705.024 193.2288z"
p-id="1259"></path>
</svg>
</div>
<div v-else>
<svg viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg" width="50" height="50">
<path d="M815.666626 168.5723 209.015919 168.5723c-44.669362 0-80.886215 36.20662-80.886215 80.886215l0 424.653653c0 44.667316 36.217876 80.887238 80.886215 80.887238l606.650707 0c44.667316 0 80.885192-36.219923 80.885192-80.887238L896.551818 249.459538C896.551818 204.77892 860.333942 168.5723 815.666626 168.5723zM512.359692 734.777853c-22.343891 0-40.453341-18.10945-40.453341-40.442084 0-22.334681 18.10945-40.442084 40.453341-40.442084 22.333658 0 40.443108 18.107403 40.443108 40.442084C552.803823 716.668403 534.694373 734.777853 512.359692 734.777853zM835.88818 633.671107 188.802552 633.671107 188.802552 229.236961l647.084605 0L835.887157 633.671107zM653.912615 795.442514 370.808816 795.442514c-16.755616 0-30.332842 13.58439-30.332842 30.333866 0 16.744359 13.577227 30.331819 30.332842 30.331819l283.102776 0c16.746406 0 30.3134-13.586436 30.3134-30.331819C684.226015 809.027927 670.659021 795.442514 653.912615 795.442514z"
p-id="11231"></path>
</svg>
</div>
</div>
</el-tooltip>
<a href="https://www.hyz.cool" style="margin : 20px 5px 0 0;cursor: pointer;">
<img src="https://files.hyz.cool/files/config/a3723d1857b94601751d31489978efd1.jpg" height="50"
width="50">
</a>
</div>
</div>
<div id="hljs" style="display: none">
<div>
<highlightjs autodetect :code="code_value"/>
</div>
</div>
<div id="content-menu" class="content-menu"
style="display: none;">
<ul style="padding: 0">
<li v-for="(item,index) in [['上传图片','Alt+P']]" @click="dealContentMenu(index)"
style="list-style: none;">
<div>
<span>{{item[0]}}</span>
<span>{{item[1]}}</span>
</div>
</li>
</ul>
</div>
<input style="z-index: -9999;position: absolute;top:-1000px;" type="file" id="file" @change="selectFile"
accept="image/png,image/jpg,image/jpeg,image/gif"/>
</div>
</template>
<script>
import ClipboardJS from "clipboard"
import explain from "./explain";
import 'highlight.js/styles/atom-one-dark.css';
import hljsVuePlugin from "@highlightjs/vue-plugin";
import creator from "./creator";
import {md} from "./md";
import "./katex/katex.css"
import {h} from 'vue'
import {ElNotification} from 'element-plus'
export default {
components: {
highlightjs: hljsVuePlugin.component,
},
data() {
return {
value: "",
lineHeight: 25,
code_value: "",
isInput: true,
inputNum: 0,
inputLineNum: 0,
textNum: 0,
textLineNum: 0,
flag: "",
viewType: "PHONE",
range: null,
timeout: null,
maxNum: 100000
}
},
mounted() {
document.getElementById('editor').addEventListener("mousedown", (e) => this.onmousedown(e))
document.getElementById('editor').addEventListener("paste", (e) => this.onPaste(e))
document.getElementById('editor').addEventListener("contextmenu", (e) => this.onContextMenu(e))
document.getElementById('editor').addEventListener("keydown", (e) => this.onkeydown(e))
var that = this
document.getElementById("editor").onscroll = (e) => {
e.preventDefault()
if (that.flag == "") {
that.flag = "editor"
that.onScroll("view")
} else if (that.flag == "editor") {
that.onScroll("view")
that.flag = ""
} else if (that.flag == "view") {
that.flag = ""
}
}
document.getElementById("view").onscroll = (e) => {
e.preventDefault()
if (that.flag == "") {
that.flag = "view"
that.onScroll("editor")
} else if (that.flag == "view") {
that.onScroll("editor")
that.flag = ""
} else if (that.flag == "editor") {
that.flag = ""
}
}
this.clearConsole()
this.value = md
this.onInput()
},
methods: {
onFocus(e) {
console.log(e.value)
},
onInput() {
if (this.timeout != null) {
clearTimeout(this.timeout)
}
let text = this.value
this.inputNum = text.length
this.inputLineNum = text.split("\n").length
if (this.inputNum >= this.maxNum) {
ElNotification({
title: '字数超过',
message: h('i', {style: 'color: teal'}, '字数超过' + this.maxNum),
})
return;
}
this.timeout = setTimeout(() => {
var view = document.getElementById("view")
var sections = []
sections.push(view.querySelector("#view-section"))
if (text[0] == "") {
text = text.substring(1)
}
sections.forEach(section => {
section.innerHTML = "<p style='text-align: center;'>微信搜索关注公众号“续加仪“</p>"
})
var textArr = explain.getTextArray(text)
textArr.forEach((item, index) => {
if (item != "" && item != null) {
creator.create(item, sections, explain, index === textArr.length - 1)
}
})
sections.forEach(section => {
this.textNum = section.innerText.length
this.textLineNum = section.innerText.split("\n\n").length
})
this.onScroll("view")
}, 150)
},
onScroll(name) {
var view = document.getElementById("view")
var editor = document.getElementById("editor")
if (name == "view") {
view.scrollTo(view.offsetLeft, (editor.scrollTop) * (view.scrollHeight - view.offsetHeight) / (1.0 * (editor.scrollHeight - editor.offsetHeight)))
} else if (name == "editor") {
editor.scrollTo(editor.offsetLeft, (view.scrollTop) * (editor.scrollHeight - editor.offsetHeight) / (1.0 * (view.scrollHeight - view.offsetHeight)))
}
},
onContextMenu(e) {
this.range = window.getSelection().getRangeAt(0);
e.preventDefault()
var menu = document.getElementById("content-menu")
console.log(e)
menu.style.top = (e.clientY - 50) + "px"
menu.style.left = (e.clientX + 20) + "px"
menu.style.display = ""
},
onmousedown(e) {
console.log(e)
var menu = document.getElementById("content-menu")
if (menu.offsetLeft > e.clientX ||
e.clientX > (menu.offsetWidth + menu.offsetLeft) ||
menu.offsetTop > e.clientY - 50 ||
e.clientY - 50 > (menu.offsetHeight + menu.offsetTop)) {
menu.style.display = "none"
}
},
onkeydown(e) {
console.log(e)
document.getElementById("content-menu").style.display = "none"
//上传图片Alt+P
if (e.keyCode == 80 && e.altKey) {
this.range = window.getSelection().getRangeAt(0);
this.dealContentMenu(0)
}
},
dealContentMenu(index) {
switch (index) {
case 0: {
document.getElementById("file").click()
}
}
},
changeViewType() {
this.viewType = this.viewType == "PHONE" ? "WEB" : "PHONE"
this.viewType == "PHONE" ? document.getElementById("view-section").style.width = "25vw" :
document.getElementById("view-section").style.width = "35vw"
},
insertText(obj, str) {
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
var startPos = obj.selectionStart,
endPos = obj.selectionEnd,
cursorPos = startPos,
tmpStr = obj.value;
obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
cursorPos += str.length;
obj.selectionStart = obj.selectionEnd = cursorPos;
} else {
obj.value += str;
}
},
selectFile(e) {
var file = document.getElementById("file")
document.getElementById("content-menu").style.display = "none"
var img = getFileUrl(file)
var that = this
blobToDataUrl(img, (base64) => {
explain.setImage(base64)
this.insertText(document.getElementById('editor'), "![" + img.name + "](P" + explain.getImageList().length + ")")
document.getElementById('editor').dispatchEvent(new Event('input', {bubbles: true}));
})
//获取input[file]图片的url Important
function getFileUrl(file) {
var url = ""
var agent = navigator.userAgent;
if (agent.indexOf("MSIE") >= 1) {
url = file.value;
} else if (agent.indexOf("Firefox") > 0) {
url = file.files.item(0);
} else if (agent.indexOf("Chrome") > 0) {
url = file.files.item(0);
}
return url;
}
function blobToDataUrl(blob, cb) {
let reader = new FileReader()
reader.onload = function (evt) {
let base64 = evt.target.result
cb(base64)
}
reader.readAsDataURL(blob)
}
},
onEditorBarMouseDown(ev) {
var scrollBar = document.getElementById("editor-bar")
var editor = document.getElementById("editor")
var editorView = document.getElementById("editor-view")
let e = ev || event;
e.preventDefault();
e.stopPropagation();
let to_t = e.clientY - scrollBar.offsetTop;
scrollBar.style.background = 'maroon'
document.onmousemove = (ev) => {
let e = ev || event;
let t = e.clientY - to_t;
if (t < 0) {
t = 0;
} else if (t > editorView.offsetHeight - scrollBar.offsetHeight) {
t = editorView.offsetHeight - scrollBar.offsetHeight;
}
if (t >= 20 && t <= editor.offsetHeight - 10) {
scrollBar.style.marginTop = t + 'px';
editor.scrollTop = ((t - 20) * editor.scrollHeight / editorView.offsetHeight)
}
}
document.onmouseup = () => {
scrollBar.style.background = '#9cd2e2'
document.onmousemove = null;
}
editor.onmouseup = (ev) => {
scrollBar.style.background = '#9cd2e2'
document.onmousemove = null;
}
},
startCursor() {
var cursor = document.getElementById("cursor").parentElement
var i = 1
cursor.style.visibility = ""
if (this.intervalController != null) {
clearInterval(this.intervalController)
}
this.intervalController = setInterval(() => {
cursor.style.visibility = i % 2 == 0 ? "hidden" : ""
i++
}, 500)
},
copy(id, targetId) {
var copy = new ClipboardJS('#' + id, {
container: document.getElementById(targetId),
});
console.log(copy)
ElNotification({
title: '复制成功',
message: h('i', {style: 'color: teal'}, '现在可以前往微信公众号粘贴啦'),
})
},
clearConsole() {
console.clear()
console.log = () => {
}
console.error = () => {
}
console.warn = () => {
}
},
onPaste(e) {
// if (this.textNum > this.maxNum) {
// this.$message("字数过多")
// //阻止默认复制
// e.preventDefault()
// return
// }
// e = (e.originalEvent || e)
// var text = e.clipboardData.getData('text/plain')
// if (this.textNum + text.length > this.maxNum) {
// this.$message("字数过多")
// e.preventDefault()
// text = text.substring(this.maxNum - this.textNum)
// document.execCommand('insertText', false, text);
// }
// setTimeout(() => {
// this.onInput()
// }, 0)
},
}
}
</script>
<style scoped>
.editor-box {
display: flex;
justify-content: space-between;
max-height: 100vh;
overflow: hidden;
}
.right-box {
display: flex;
flex-direction: row;
}
.left-box {
display: flex;
flex-direction: column;
width: 65vw;
}
.editor-view {
display: flex;
flex-direction: row;
height: 100vh;
}
.editor {
border-radius: 20px;
cursor: text;
background: #eeefee;
color: #57643d;
width: 100%;
margin: 15px;
padding: 20px;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
outline: none;
border: none;
word-break: break-all;
line-height: inherit;
font-size: 20px;
overflow-y: scroll;
font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
.editor span {
color: black;
font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
.view-box {
display: flex;
flex-direction: column;
height: 100vh;
}
.view {
border-radius: 20px;
margin: 15px;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
overflow-y: auto;
padding: 25px 20px;
}
.view section {
width: 25vw;
}
#view-section {
outline: none;
}
.content-menu {
position: absolute;
background: white;
box-shadow: 0 0 8px 0px #27262638;
width: 150px;
}
.content-menu div {
display: flex;
flex-direction: row;
justify-content: space-between;
cursor: pointer;
padding: 10px;
}
.content-menu div:active {
background: #e6e6e6;
}
</style>
htmlexplain.js
import {STYLE} from "./style";
import katex from "katex"
import 'katex/dist/contrib/mhchem.js' // modify katex module
const prefix = "@##@@##@"
const endfix = "&@@#@@&"
const REPLACE = {
X: ['*', 'aa'],
Z: ['~', 'bb']
}
var footNoteList = []
var imageList = []
export default {
getTextArray(str) {
footNoteList = []
var arr = str.split("\n")
var arrRes = []
var tempCode = []
var canCode = false
var tempList = []
var canList = false
var tempQuote = []
var canQuote = false
var tempTable = []
var canTable = false
var tempFormula = []
var canFormula = false
var that = this
arr.forEach(item => {
//判断是否代码区
if (that.isCode(item)) {//是代码区标志
canCode = !canCode
if (!canCode) {
arrRes.push(tempCode.join("\n"))
tempCode = []
} else {
tempCode.push("```")
}
} else {//不是代码区标志--> 代码区||非代码区
if (canCode) {//代码区
tempCode.push(item)//添加该行到代码区
} else {//非代码区
//判断是否l列表区
if (that.isList(item)) {//是列表区标志
if (!canList) {
canList = !canList
}
tempList.push(item)//添加该行到列表区
} else {//不是列表区标志
if (canList) {
arrRes.push(tempList.join("\n"))
canList = false
tempList = []
}
//判断是否是引用区
if (that.isQuote(item)) {//是引用区
if (!canQuote) {
canQuote = !canCode
}
tempQuote.push(item)
} else {//不是引用区
if (canQuote) {
canQuote = false
arrRes.push(tempQuote.join("\n"))
tempQuote = []
}
//判断是否是表格区
if (that.isTable(item)) {//是表格区
if (!canTable) {
canTable = !canTable
}
tempTable.push(item)
} else {//不是表格区
if (canTable) {
canTable = false
arrRes.push(tempTable.join("\n"))
tempTable = []
}
//判断是否是公式区
if (that.isFormula(item)) {//是公式区标志
canFormula = !canFormula
if (!canFormula) {
tempFormula.push(item.substr(0, item.length - 2))
arrRes.push(tempFormula.join("\n"))
tempFormula = []
} else {
tempFormula.push(item)
}
} else {
if (canFormula) {
tempFormula.push(item)
} else {
arrRes.push(item)
}
}
}
}
}
}
}
}
)
if (tempCode.length != 0 && canCode) {
arrRes.push(tempCode.join("\n"))
}
if (tempList.length != 0 && canList) {
arrRes.push(tempList.join("\n"))
}
if (tempQuote.length != 0 && canQuote) {
arrRes.push(tempQuote.join("\n"))
}
if (tempTable.length != 0 && canTable) {
arrRes.push(tempTable.join("\n"))
}
if (tempFormula.length != 0 && canFormula) {
arrRes.push(tempFormula.join("\n"))
}
return arrRes
},
dealLine(str) {
if (str == null) {
return ""
}
str = this.dealZeroSpace(str)
if (str.indexOf("$") >= 0) {
str = this.dealFormulaInline(str, katex)
}
if (str.indexOf('\\') >= 0) {
str = this.dealKeep(str, "keep")
}
if (str.indexOf('[') >= 0 && str.indexOf(']') >= 0 && str.indexOf('(') >= 0 && str.indexOf(')') >= 0) {
if (str.indexOf('!') >= 0) {
str = this.dealImage(str)
}
str = this.dealLink(str)
}
if (str.indexOf('{') >= 0) {
str = this.dealPhonetic(str)
}
if (str.indexOf('\*\*') >= 0) {
str = this.dealStrong(str)
}
if (str.indexOf('~~') >= 0) {
str = this.dealDelete(str)
}
if (str.indexOf('`') >= 0) {
str = this.dealMark(str)
}
if (str.indexOf('\*') >= 0) {
str = this.dealItalic(str)
}
if (str.indexOf(prefix) >= 0 && str.indexOf(endfix) >= 0) {
str = this.dealKeep(str)
}
return str
},
dealLoopLine(str){
if (str.indexOf('!') >= 0) {
str = this.dealLoopImage(str)
}
return str
},
dealZeroSpace(str) {
str = encodeURIComponent(str)
// if (str.indexOf("%E2%80%8B") > -1) {
// str = str.replace('%E2%80%8B', '')
// return this.dealZeroSpace(decodeURIComponent(str))
// }
// else if (str.indexOf("%A0%A0") > -1) {
// str = str.replace('%A0%A0', '%A0')
// return this.dealZeroSpace(decodeURIComponent(str))
// }
return decodeURIComponent(str)
},
dealLink(str) {
var strRes = ""
var index = 0
str.replace(/\[[^\]\[]*\]\([^\)]*\)/gi, function (match, position) {
strRes += str.substring(index, position)
var link = match.match(/\((.*?)\)/)[1]
var text = match.match(/\[(.*?)\]/)[1]
var linkArr = link.split(" ")
if (linkArr.length >= 2) {
footNoteList.push(".content.=" + linkArr[1] + ".link.=" + linkArr[0])
strRes += " <span style='" + STYLE.LINK + "'>" + text + "</span><sup style='" + STYLE.LINK_SUP + "'>[" + footNoteList.length + "]</sup>"
} else {
strRes += "<a href='" + linkArr[0] + "' style='" + STYLE.LINK + "' >" + text + "</a>"
}
index = position + match.length
})
strRes += str.substring(index)
return strRes
},
dealImage(str) {
var strRes = ""
var index = 0
var that = this
function dealStr(char, string, type) {
if (string == null) {
return ""
}
var target, replacer
if (type == "keep") {
target = char
replacer = that.encode(char)
} else {
target = prefix + encodeURIComponent(char) + endfix
replacer = char
}
if (string.indexOf(target) >= 0) {
return dealStr(char, string.replace(target, replacer), type)
} else {
return string
}
}
str.replace(/!\[[^\]\[]*\]\([^\)]*\)/gi, function (match, position) {
var des = dealStr('`', match.match(/\[(.*?)\]/)[1], "keep")
des = dealStr('*', des, "keep")
des = dealStr('~', des, "keep")
strRes += str.substring(index, position)
var src = match.match(/\((.*?)\)/)[1].split(",")
var style = ""
if (src.length >= 2) {
var size = src[1]
if (size.indexOf("\*") > 0) {
style = "width:" + size.split("\*")[0] + "px;height:" + size.split("\*")[1] + "px;"
} else if (size.indexOf("x") > 0) {
style = "width:" + size.split("x")[0] + "px;height:" + size.split("x")[1] + "px;"
} else if (parseFloat(size) < 1) {
style = "width:" + parseFloat(size) * 100 + "%;"
}
}
if (src.length >= 3) {
var border_r = src[2]
style += "border-radius:" + border_r + "px;"
}
strRes += "<figure style='" + STYLE.FIGURE + "'>" +
"<img src='" + (src[0].indexOf("P") === 0 ? that.getImage(parseInt(src[0].substring(1)) - 1) : dealStr("\*", src[0], "keep")) + "' alt='" + des + "'style='" + STYLE.IMG + style + "'/>" +
"<figcaption style='" + STYLE.FIGURE_FIGCAPTION + "'>" + des + "</figcaption>" +
"</figure>"
index = position + match.length
})
strRes += str.substring(index)
return strRes
},
dealLoopImage(str){
var strRes = ""
var index = 0
var that = this
function dealStr(char, string, type) {
if (string == null) {
return ""
}
var target, replacer
if (type == "keep") {
target = char
replacer = that.encode(char)
} else {
target = prefix + encodeURIComponent(char) + endfix
replacer = char
}
if (string.indexOf(target) >= 0) {
return dealStr(char, string.replace(target, replacer), type)
} else {
return string
}
}
str.replace(/!\[[^\]\[]*\]\([^\)]*\)/gi, function (match, position) {
var des = dealStr('`', match.match(/\[(.*?)\]/)[1], "keep")
des = dealStr('*', des, "keep")
des = dealStr('~', des, "keep")
strRes += str.substring(index, position)
var src = match.match(/\((.*?)\)/)[1].split(",")
var style = ""
if (src.length >= 2) {
var size = src[1]
if (size.indexOf("\*") > 0) {
style = "width:" + size.split("\*")[0] + "px;height:" + size.split("\*")[1] + "px;"
} else if (size.indexOf("x") > 0) {
style = "width:" + size.split("x")[0] + "px;height:" + size.split("x")[1] + "px;"
} else if (parseFloat(size) < 1) {
style = "width:" + parseFloat(size) * 100 + "%;"
}
}
if (src.length >= 3) {
var border_r = src[2]
style += "border-radius:" + border_r + "px;"
}
strRes += "<img src='" + (src[0].indexOf("P") === 0 ? that.getImage(parseInt(src[0].substring(1)) - 1) : dealStr("\*", src[0], "keep")) + "' alt='" + des + "'style='box-shadow: inset 0 0 18px 2px;width: 100%;" + style + "'>"
index = position + match.length
})
strRes += str.substring(index)
return strRes
},
dealStrong(str) {
if (str == null) {
return ""
}
var strRes = ""
var index = 0
str.replace(/\*\*[^\*]*\*{0,1}[^\*]*\*\*/gi, function (match, position) {
strRes += str.substring(index, position)
strRes += "<strong>" + match.substr(2, match.length - 4) + "</strong>"
index = position + match.length
})
strRes += str.substring(index)
return strRes
}
,
dealDelete(str) {
if (str == null) {
return ""
}
var strRes = ""
var index = 0
str.replace(/\~\~[^\~]*\~{0,1}[^\~]*\~\~/gi, function (match, position) {
strRes += str.substring(index, position)
strRes += "<s>" + match.substr(2, match.length - 4) + "</s>"
index = position + match.length
})
strRes += str.substring(index)
return strRes
}
,
dealMark(str) {
if (str == null) {
return ""
}
var strRes = ""
var index = 0
str.replace(/\`[^\`]*\`/gi, function (match, position) {
strRes += str.substring(index, position)
strRes += "<span style='" + STYLE.MARK + "'>" + match.substr(1, match.length - 2) + "</span>"
index = position + match.length
})
strRes += str.substring(index)
return strRes
}
,
dealItalic(str) {
if (str == null) {
return ""
}
var strRes = ""
var index = 0
str.replace(/\*[^\*]*\*/gi, function (match, position) {
strRes += str.substring(index, position)
strRes += "<em>" + match.substr(1, match.length - 2) + "</em>"
index = position + match.length
})
strRes += str.substring(index)
return strRes
}
,
dealPhonetic(str) {
if (str == null) {
return ""
}
var strRes = ""
var index = 0
str.replace(/\{.*\}/gi, function (match, position) {
strRes += str.substring(index, position)
var res = match.substring(1,match.length-1)
strRes += "<ruby>" + res.split("|")[0] +"<rt>" +
res.split("|")[1]+
"</rt>"
"</ruby>"
index = position + match.length
})
strRes += str.substring(index)
return strRes
}
,
dealFormulaInline(str, katex) {
if (str == null) {
return ""
}
var strRes = ""
var index = 0
str.replace(/\$[^\$]*\$/gi, function (match, position) {
strRes += str.substring(index, position)
strRes += "<span>" + katex.renderToString(match.substr(1, match.length - 2)) + "</span>";
index = position + match.length
})
strRes += str.substring(index)
return strRes
},
dealKeep(str, type) {
var res = ""
var index = 0
var that = this
if (type == "keep") {
str.replace(/\\./gi, function (match, pos) {
res += str.substring(index, pos)
var char = match.substring(1)
res += that.encode(char)
index = pos + match.length
})
res += str.substring(index)
return res
} else {
str.replace(/\@\#\#\@\@\#\#\@.{1,6}\&\@\@\#\@\@\&/gi, function (match, pos) {
res += str.substring(index, pos)
var char = match.substr(prefix.length, match.length - prefix.length - endfix.length)
res += that.decode(char)
index = pos + match.length
})
res += str.substring(index)
return res
}
},
dealQuote(str) {
return ele
},
isH1(item) {
return item.indexOf("# ") === 0 || encodeURIComponent(item).indexOf("%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%23%20") === 0
},
isH2(item) {
return item.indexOf("## ") === 0 || encodeURIComponent(item).indexOf("%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%23%23%20") === 0
},
isH3(item) {
return item.indexOf("### ") === 0 || encodeURIComponent(item).indexOf("%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%23%23%23%20") === 0
},
isH4(item) {
return item.indexOf("#### ") === 0 || encodeURIComponent(item).indexOf("%23%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%23%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%23%23%23%23%20") === 0
},
isH5(item) {
return item.indexOf("##### ") === 0 || encodeURIComponent(item).indexOf("%23%23%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%23%23%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%23%23%23%23%23%20") === 0
},
isH6(item) {
return item.indexOf("###### ") === 0 || encodeURIComponent(item).indexOf("%23%23%23%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%23%23%23%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%23%23%23%23%23%23%20") === 0
},
isCenterH1(item) {
return item.indexOf("C# ") === 0 || encodeURIComponent(item).indexOf("C%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("C%E2%80%8B%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("C%E2%80%8B%23%20") === 0
},
isCenterH2(item) {
return item.indexOf("C## ") === 0 || encodeURIComponent(item).indexOf("C%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("C%E2%80%8B%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("C%E2%80%8B%23%23%20") === 0
},
isCenterH3(item) {
return item.indexOf("C### ") === 0 || encodeURIComponent(item).indexOf("C%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("C%E2%80%8B%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("C%E2%80%8B%23%23%23%20") === 0
},
isCenterH4(item) {
return item.indexOf("C#### ") === 0 || encodeURIComponent(item).indexOf("C%23%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("C%E2%80%8B%23%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("C%E2%80%8B%23%23%23%23%20") === 0
},
isCenterH5(item) {
return item.indexOf("C##### ") === 0 || encodeURIComponent(item).indexOf("C%23%23%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("C%E2%80%8B%23%23%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("C%E2%80%8B%23%23%23%23%23%20") === 0
},
isCenterH6(item) {
return item.indexOf("C###### ") === 0 || encodeURIComponent(item).indexOf("C%23%23%23%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("C%E2%80%8B%23%23%23%23%23%23%C2%A0") === 0 || encodeURIComponent(item).indexOf("C%E2%80%8B%23%23%23%23%23%23%20") === 0
},
isH(item) {
if (this.isH1(item)) {
return [true, "H1"]
} else if (this.isH2(item)) {
return [true, "H2"]
} else if (this.isH3(item)) {
return [true, "H3"]
} else if (this.isH4(item)) {
return [true, "H4"]
} else if (this.isH5(item)) {
return [true, "H5"]
} else if (this.isH6(item)) {
return [true, "H6"]
} else if (this.isCenterH1(item)) {
return [true, "HC1"]
} else if (this.isCenterH2(item)) {
return [true, "HC2"]
} else if (this.isCenterH3(item)) {
return [true, "HC3"]
} else if (this.isCenterH4(item)) {
return [true, "HC4"]
} else if (this.isCenterH5(item)) {
return [true, "HC5"]
} else if (this.isCenterH6(item)) {
return [true, "HC6"]
} else {
return [false, ""]
}
},
isQuote(item) {
return this.isQuote1(item)
},
isQuote1(item) {
return item.indexOf(">") === 0 || encodeURIComponent(item).indexOf("%3E%") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%3E") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%3E") === 0
},
isQuote2(item) {
return item.indexOf(">>") === 0 || encodeURIComponent(item).indexOf("%3E%3E") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%3E%3E") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%3E%3E") === 0
},
isQuote3(item) {
return item.indexOf(">>>") === 0 || encodeURIComponent(item).indexOf("%3E%3E%3E") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%3E%3E%3E") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%3E%3E%3E") === 0
},
isList(item) {
return this.isList1(item) || this.isList2(item) || this.isList3(item)
},
isList1(item) {
return item.indexOf("- ") === 0 || encodeURIComponent(item).indexOf("-C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B-%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B-%20") === 0;
},
isList2(item) {
return item.indexOf(" - ") === 0 || encodeURIComponent(item).indexOf("%C2%A0%20-%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%C2%A0%20-%C2%A0") === 0 || encodeURIComponent(item).indexOf("%C2%A0%20-%20") === 0;
},
isList3(item) {
return item.indexOf(" - ") === 0 || encodeURIComponent(item).indexOf("%C2%A0%20%C2%A0%20-%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%C2%A0%20%C2%A0%20-%C2%A0") === 0 || encodeURIComponent(item).indexOf("%C2%A0%20%C2%A0%20-%20") === 0;
},
isCode(item) {
return item.indexOf("```") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%60%60%60") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%E2%80%8B%60%60%60") === 0 || encodeURIComponent(item).indexOf("%60%60%60") === 0
},
isTable(item) {
return item.indexOf("|") === 0 || encodeURIComponent(item).indexOf("%7C%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%7C%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%7C") === 0 || encodeURIComponent(item).indexOf("%E2%80%8B%7C%20") === 0
},
isFormula(item) {
return item.indexOf("$$") === 0 || encodeURIComponent(item).indexOf("%24%24") === 0 || (item.indexOf("$$") === item.length - 3&&item.indexOf("$$") >0) || (encodeURIComponent(item).indexOf("%24%24") === item.length - 3&&encodeURIComponent(item).indexOf("%24%24") >0) || encodeURIComponent(item).indexOf("%E2%80%8B%24%24") === 0
},
isLoopV(item){
return item.indexOf("LV") === 0 || encodeURIComponent(item).indexOf("LV%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8BL%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8BL") === 0 || encodeURIComponent(item).indexOf("%E2%80%8BL%20") === 0
},
isLoopH(item){
return item.indexOf("LH") === 0 || encodeURIComponent(item).indexOf("LH%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8BLH%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8BLH") === 0 || encodeURIComponent(item).indexOf("%E2%80%8BLH%20") === 0
},
isLoop(item){
return item.indexOf("L") === 0 || encodeURIComponent(item).indexOf("L%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8BL%C2%A0") === 0 || encodeURIComponent(item).indexOf("%E2%80%8BL") === 0 || encodeURIComponent(item).indexOf("%E2%80%8BL%20") === 0
},
isDivider(item) {
if (item.length <= 2) return false
return this.isRepeat("-", item)
}
,
isRepeat(char, item) {
var isRepeat = true
item.split("").forEach(value => {
if (value != char) {
isRepeat = false
return
}
})
return isRepeat
},
isRightP(item) {
return item.indexOf("R ") === 0 || encodeURIComponent(item).indexOf("R%20") === 0 || encodeURIComponent(item).indexOf("%E2%80%8BR%20") === 0 || encodeURIComponent(item).indexOf("%E2%80%8BR%C2%A0") === 0
},
isCenterP(item) {
return item.indexOf("C ") === 0 || encodeURIComponent(item).indexOf("C%20") === 0 || encodeURIComponent(item).indexOf("%E2%80%8BC%20") === 0 || encodeURIComponent(item).indexOf("%E2%80%8BC%C2%A0") === 0
},
encode(char) {
var replacer = ""
for (let replaceKey in REPLACE) {
if (char == REPLACE[replaceKey][0]) {
replacer = prefix + encodeURIComponent(REPLACE[replaceKey][1]) + endfix
return replacer
}
}
if (replacer == '') {
replacer = prefix + encodeURIComponent(char) + endfix
}
return replacer
},
decode(char) {
var res = ''
for (let replaceKey in REPLACE) {
if (char == REPLACE[replaceKey][1]) {
res = REPLACE[replaceKey][0]
return res
}
}
if (res == '') {
res = decodeURIComponent(char)
}
return res
},
getFootNote() {
if (footNoteList.length > 0) {
let FOOTNOTE = footNoteList
footNoteList = []
return FOOTNOTE;
}
return []
},
setImage(str) {
imageList.push(str)
},
getImageList() {
return imageList
},
getImage(index) {
if (imageList.length > index) {
return imageList[index]
}
return "http://hyz.cool/public/R/img/logo.png"
}
}
javascriptcreator.js
import explain from "./explain";
import {STYLE} from "./style";
import hljs from "highlight.js/lib/common";
import katex from "katex"
import 'katex/dist/contrib/mhchem.js' // modify katex module
const ELEMENT_TYPE = {
H1: "h1",
H2: "h2",
H3: "h3",
H4: "h4",
H5: "h5",
H6: "h6",
P: "p",
SPAN: "span",
DIV: "div",
PRE: "pre",
CODE: "code",
UL: "ul",
LI: "li",
BLOCKQUOTE: "blockquote",
TABLE: "table",
THEAD: "thead",
TR: "tr",
TH: "th",
TD: "td",
TBODY: "tbody",
SECTION: "section",
EM: "em"
}
export default {
createEle(name) {
return document.createElement(name)
},
createH1(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.H1)
ele.style = STYLE.H1
var innerHTML = explain.dealLine(item.substring(2))
ele.innerHTML = innerHTML
this.addToSection(sections, ele)
},
createH2(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.H2)
ele.style = STYLE.H2
var innerHTML = explain.dealLine(item.substring(3))
ele.innerHTML = innerHTML
this.addToSection(sections, ele)
},
createH3(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.H3)
ele.style = STYLE.H3
var innerHTML = explain.dealLine(item.substring(4))
ele.innerHTML = innerHTML
this.addToSection(sections, ele)
},
createH4(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.H4)
ele.style = STYLE.H4
var innerHTML = explain.dealLine(item.substring(5))
ele.innerHTML = innerHTML
this.addToSection(sections, ele)
},
createH5(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.H5)
ele.style = STYLE.H5
var innerHTML = explain.dealLine(item.substring(6))
ele.innerHTML = innerHTML
this.addToSection(sections, ele)
},
createH6(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.H6)
ele.style = STYLE.H6
var innerHTML = explain.dealLine(item.substring(7))
ele.innerHTML = innerHTML
this.addToSection(sections, ele)
},
createCenterH1(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.H1)
ele.style = STYLE.CENTER_H1
var innerHTML = explain.dealLine(item.substring(3))
ele.innerHTML = innerHTML
this.addToSection(sections, ele)
},
createCenterH2(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.H2)
ele.style = STYLE.CENTER_H2
var innerHTML = explain.dealLine(item.substring(4))
ele.innerHTML = innerHTML
this.addToSection(sections, ele)
},
createCenterH3(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.H3)
ele.style = STYLE.CENTER_H3
var innerHTML = explain.dealLine(item.substring(5))
ele.innerHTML = innerHTML
this.addToSection(sections, ele)
},
createCenterH4(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.H4)
ele.style = STYLE.CENTER_H4
var innerHTML = explain.dealLine(item.substring(6))
ele.innerHTML = innerHTML
this.addToSection(sections, ele)
},
createCenterH5(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.H5)
ele.style = STYLE.CENTER_H5
var innerHTML = explain.dealLine(item.substring(7))
ele.innerHTML = innerHTML
this.addToSection(sections, ele)
},
createCenterH6(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.H6)
ele.style = STYLE.CENTER_H6
var innerHTML = explain.dealLine(item.substring(8))
ele.innerHTML = innerHTML
this.addToSection(sections, ele)
},
createQuote1(item, sections) {
var str = explain.dealLine(item)
var arr = str.split("\n")
var index = 0
var ele = document.createElement("blockquote")
ele.style = STYLE.BLOCKQUOTE1
var arrRes = []
get()
var pos = 0
var preGrade1 = 1
createRes()
function createRes(line = arrRes[pos], pre = null) {
if (pos < arrRes.length) {
var currentGrade = getGrade(line)
if (currentGrade < preGrade1) {
if (pre != null) {
ele.appendChild(pre)
}
// >>
// >>>
preGrade1 = currentGrade
pos++
createRes(arrRes[pos], create(line, currentGrade, currentGrade))
} else {
var temp = create(line, currentGrade - preGrade1 + 1, currentGrade)
if (pre != null) {
pre.appendChild(temp)
ele.appendChild(pre)
}
preGrade1 = currentGrade
pos++
createRes(arrRes[pos], temp)
// ele.appendChild(pre)
}
} else {
if (pre != null) {
ele.append(pre)
}
}
}
function getGrade(item) {
return item.match(/\>*/)[0].length
}
var preGrade = 1
function get(line = arr[0], temp = "") {
if (index < arr.length) {
var currentGrade = getGrade(line)
if (currentGrade != preGrade) {
if (temp != "") {
arrRes.push(temp)
}
temp = line
} else if (currentGrade == preGrade) {
temp += (temp == "" ? line + "\n" : "\n" + line.substring(currentGrade))
}
preGrade = currentGrade
index++
get(arr[index], temp)
} else {
if (temp != "") {
arrRes.push(temp)
}
}
}
// function get(line = arr[0], preBq, temp = "") {
// if (index < arr.length) {
// var currentGrade = getGrade(line)
// console.log(currentGrade)
// if (currentGrade < preGrade) {
// if (temp != "") {
// ele.append(create(temp, preGrade))
// }
// if (preBq != null) {
// ele.append(preBq.cloneNode(true))
// preBq = null
// }
// temp = line
// } else if (currentGrade > preGrade) {
// if (preBq != null) {
// if (temp != "") {
// preBq.append(create(temp, currentGrade-preGrade))
// temp = line
// } else {
// preBq.append(create(line, currentGrade-preGrade))
// temp = ""
// }
// } else {
// if (temp != "") {
// preBq = create(temp, currentGrade-preGrade)
// temp = line
// } else {
// preBq = create(line, currentGrade-preGrade)
// temp = ""
// }
// }
// } else if (currentGrade == preGrade) {
// temp += (temp == "" ? line + "\n" : "\n" + line.substring(currentGrade))
// preBq = create(temp, currentGrade)
// }
// preGrade = currentGrade
// index++
// get(arr[index], preBq, temp)
// } else {
// if (temp != "") {
// ele.append(create(temp, preGrade))
// }
// if (preBq != null) {
// ele.append(preBq)
// }
// }
// }
function create(item, grade = 1, len = 1) {
if (grade == 1) {
var p = document.createElement("p")
// p.innerHTML =item.substring(grade)
var innerHTMLArr = item.substring(len).split("\n")
innerHTMLArr.forEach(value => {
var pp = document.createElement("p")
pp.innerHTML = value
p.append(pp)
})
return p
} else {
var blockquote = document.createElement("blockquote")
var sub = create(item.substring(1), grade - 1, len - 1)
blockquote.append(sub)
blockquote.style = STYLE.BLOCKQUOTE1
return blockquote
}
}
this.addToSection(sections, ele)
return
var blockquote = this.createEle(ELEMENT_TYPE.BLOCKQUOTE)
var p = this.createEle(ELEMENT_TYPE.P)
p.style = STYLE.BLOCKQUOTE_P
var that = this
var is2 = false
function dealQuoteLine(line, blockquote) {
if (explain.isQuote2(line)) {
line = line.substring(1)
var blockquote2 = that.createEle(ELEMENT_TYPE.BLOCKQUOTE)
blockquote2.style = STYLE.BLOCKQUOTE1
dealQuoteLine(line, blockquote2)
blockquote.append(blockquote2)
} else {
var innerHTML = line.substring(1)
var isH = explain.isH(innerHTML)
if (isH[0]) {
that.createH(isH[1], innerHTML, [blockquote])
} else {
p.innerHTML = innerHTML
blockquote.append(p.cloneNode(true))
}
}
}
arr.forEach(line => {
dealQuoteLine(line, blockquote)
})
// if (is2) {
// blockquote.append(blockquote2.cloneNode(true))
// is2 = false
// blockquote2 = null
// }
blockquote.style = STYLE.BLOCKQUOTE1
var section = this.createEle(ELEMENT_TYPE.SECTION)
this.addToSection(sections, blockquote)
}
,
createQuote2(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.BLOCKQUOTE)
ele.style = STYLE.BLOCKQUOTE2
var innerHTML = explain.dealLine(item.substring(3))
ele.innerHTML = innerHTML
this.addToSection(sections, ele)
}
,
createList(item, sections) {
var list = item.split("\n")
var ul1, li1
var ul2, li2
var ul3, li3
var that = this
function appendUl3() {
if (ul3 != null) {
if (li2 == null) {
li2 = that.createEle(ELEMENT_TYPE.LI)
li2.style = STYLE.LI
}
li2.append(ul3)
if (ul2 == null) {
ul2 = that.createEle(ELEMENT_TYPE.UL)
ul2.style = STYLE.UL
ul2.append(li2)
}
if (li1 == null) {
li1 = that.createEle(ELEMENT_TYPE.LI)
li1.style = STYLE.LI
}
if (ul1 == null) {
ul1 = that.createEle(ELEMENT_TYPE.UL)
ul1.style = STYLE.UL
ul1.append(li1)
}
li1.append(ul2)
}
ul3 = null
li3 = null
}
function appendUl2() {
if (ul2 != null) {
if (li1 == null) {
li1 = that.createEle(ELEMENT_TYPE.LI)
li1.style = STYLE.LI
}
if (ul1 == null) {
ul1 = that.createEle(ELEMENT_TYPE.UL)
ul1.style = STYLE.UL
ul2.append(li2)
}
li1.append(ul2)
}
ul2 = null
li2 = null
}
var ele
list.forEach(item => {
if (explain.isList1(item)) {
appendUl3();
appendUl2();
li1 = that.createEle(ELEMENT_TYPE.LI)
var innerHTML = explain.dealLine(item.substring(2))
li1.innerHTML = innerHTML
li1.style = STYLE.LI
if (ul1 == null) {
ul1 = that.createEle(ELEMENT_TYPE.UL)
ul1.style = STYLE.UL
}
ul1.append(li1)
} else if (explain.isList2(item)) {
appendUl3()
appendUl2();
var innerHTML = explain.dealLine(item.substring(4))
li2 = that.createEle(ELEMENT_TYPE.LI)
li2.innerHTML = innerHTML
li2.style = STYLE.LI
if (ul2 == null) {
ul2 = that.createEle(ELEMENT_TYPE.UL)
ul2.style = STYLE.UL
}
ul2.append(li2)
} else if (explain.isList3(item)) {
var innerHTML = explain.dealLine(item.substring(6))
li3 = that.createEle(ELEMENT_TYPE.LI)
li3.innerHTML = innerHTML
li3.style = STYLE.LI
if (ul3 == null) {
ul3 = that.createEle(ELEMENT_TYPE.UL)
ul3.style = STYLE.UL
}
ul3.append(li3)
}
}
)
appendUl3()
appendUl2()
ele = ul1
this.addToSection(sections, ele)
}
,
createCode(item, sections, hljs) {
var innerHTML = item.substring(4)
var p = this.createEle(ELEMENT_TYPE.P)
p.style.padding=""
p.style.margin=""
var code = this.createEle(ELEMENT_TYPE.CODE)
//此种方法在微信编辑器里面不适用，包括flex布局、relative布局均失败
// const linesLength = innerHTML.split(/\n/).length - 1;
// // 生成行号
// let linesNum = '<span aria-hidden="true" style="' +
// 'font-family: Consolas,Menlo,Courier !important; ' +
// 'pointer-events: none;' +
// 'top: 12px;line-height: 24px !important;' +
// 'color:#7c868fba;left: 0;font-size: 100%;width: 45px;text-align: center;letter-spacing: -1px;border-right: 1px solid rgba(0, 0, 0, .32);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;counter-reset: linenumber;">';
// for (let index = 0; index < linesLength+1; index++) {
// linesNum = linesNum + "<span style='pointer-events: none;display: block;counter-increment: linenumber;'>"+(index+1)+"</span>";
// }
// linesNum += "</span>";
// // highlight.js 高亮代码
// var preCode = hljs.highlightAuto(innerHTML).value
// var html = `
// <pre class="hljs" style="padding: 12px 1px 0px 5px !important;
// border-radius: 5px!important;
// font-size: 14px!important;
// margin:0;
// overflow: hidden!important;display:flex;">
// ${linesNum}
// <code style="font-family: Consolas,Menlo,Courier !important;line-height: 24px !important;margin-left: 5px;">${preCode}</code>
// </pre>`
//采用微信策略
const lines = innerHTML.split(/\n/);
var linesLength = lines.length ;
var html =""
for (let index = 0; index < linesLength; index++) {
html+= "<code style='display: flex;flex-direction: row;align-content: center;color:#7c868fba;'><p style='min-width: 40px;border-right: 1px solid rgba(0, 0, 0, .32);text-align: right !important;padding-right: 4px;margin-right: 4px;'>"+(index+1)+"</p><span style=''>" + hljs.highlightAuto(lines[index]).value+"</span></code>"
}
code.innerHTML =`<code style="font-family: Consolas,Menlo,Courier !important;line-height: 24px !important;margin-left: 5px;">${html}</code></pre>`
// code.append(p)
code.style = STYLE.CODE
sections.forEach(section => {
var ele = this.createEle(ELEMENT_TYPE.PRE)
var span = this.createEle(ELEMENT_TYPE.SPAN)
span.style = STYLE.CODE_PREFIX
ele.append(span)
ele.append(code.cloneNode(true))
ele.style = STYLE.PRE
section.append(ele)
})
},
createFormula(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.P)
var innerHTML = katex.renderToString(item.substring(2))
ele.innerHTML = innerHTML
ele.style = STYLE.CENTER_P
this.addToSection(sections, ele)
}
,
createTable(item, sections) {
var list = item.split("\n")
var tableTitleList = []
var tableColumnNum = 0
var tableAlignList = []
var table, tbody, thead, theadTr, theadTh, tbodyTr, tbodyTd
var that = this
list.forEach((line, index) => {
if (index == 0) {
tableTitleList = line.split("|").filter((s) => {
return s
});
tableColumnNum = tableTitleList.length
if (tableColumnNum < 1) {
that.createP(item, sections)
return
}
} else if (index == 1) {
tableAlignList = line.split("|").filter((s) => {
return s
});
if (tableTitleList.length != tableColumnNum) {
that.createP(item, sections)
return
}
var can = true
tableAlignList = tableAlignList.map(align => {
align = align.trim()
if (explain.isRepeat("-", align)) {
return "text-align:left;"
} else if (align.indexOf(":") == 0) {
var left = align.substr(1, align.length - 1)
if (explain.isRepeat("-", left)) {
return "text-align:left;"
} else if (left.indexOf(":") == left.length - 1) {
left = left.substr(0, left.length - 1)
if (explain.isRepeat("-", left)) {
return "text-align:center;"
}
}
} else if (align.indexOf(":") == align.length - 1) {
var left = align.substr(0, align.length - 1)
if (explain.isRepeat("-", left)) {
return "text-align:right;"
}
}
can = false
return ""
})
if (!can) {
that.createP(item, sections)
return
}
table = that.createEle(ELEMENT_TYPE.TABLE)
thead = that.createEle(ELEMENT_TYPE.THEAD)
thead.style = STYLE.THEAD
theadTr = that.createEle(ELEMENT_TYPE.TR)
theadTr.style = STYLE.TR
theadTh = that.createEle(ELEMENT_TYPE.TH)
tableTitleList.forEach((html, pos) => {
theadTh.innerHTML = html
theadTh.style = STYLE.TH + tableAlignList[pos]
theadTr.append(theadTh.cloneNode(true))
})
thead.append(theadTr)
table.append(thead)
} else {
if (tbody == null) {
tbody = that.createEle(ELEMENT_TYPE.TBODY)
}
tbodyTr = that.createEle(ELEMENT_TYPE.TR)
tbodyTr.style = STYLE.TR
tbodyTd = that.createEle(ELEMENT_TYPE.TD)
var rowList = line.split("|").filter((s) => {
return s
})
if (rowList.length < tableColumnNum) {
rowList.forEach((value, pos) => {
tbodyTd.innerHTML = value
tbodyTd.style = STYLE.TD + tableAlignList[pos]
tbodyTr.append(tbodyTd.cloneNode(true))
})
if (tbodyTr.children.length == rowList.length) {
for (var i = 0; i < tableColumnNum - rowList.length; i++) {
tbodyTd.innerHTML = ""
tbodyTd.style = STYLE.TD + tableAlignList[rowList.length + i]
tbodyTr.append(tbodyTd.cloneNode(true))
}
}
} else if (rowList.length >= tableColumnNum) {
for (var i = 0; i < tableColumnNum; i++) {
tbodyTd.innerHTML = rowList[i]
tbodyTd.style = STYLE.TD + tableAlignList[i]
tbodyTr.append(tbodyTd.cloneNode(true))
}
}
tbody.append(tbodyTr)
}
})
if (table != null) {
var section = this.createEle(ELEMENT_TYPE.SECTION)
// var div1 = this.createEle(ELEMENT_TYPE.DIV)
table.style = STYLE.TABLE
if (tbody != null) {
table.append(tbody)
}
section.style = "overflow-x: auto;"
section.append(table)
// div1.style = "margin: 20px 0;display:flex;justify-content:center;align-items:center;"
// div1.append(div)
this.addToSection(sections, section)
}
}
,
createDivider(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.P)
ele.style = STYLE.DIVIDER
this.addToSection(sections, ele)
}
,
createLoop(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.SECTION)
var innerHTML = explain.dealLoopLine(item.substring(1))
var sec = this.createEle(ELEMENT_TYPE.SECTION)
sec.innerHTML = innerHTML
sec.style = STYLE.LOOP_H.INN
ele.append(sec)
var span = this.createEle(ELEMENT_TYPE.SPAN)
span.innerText = "<<<左右滑动查看更多>>>"
span.style = "text-align:center;"
ele.append(span)
ele.style = STYLE.LOOP_H.OUT+"height:250px;"
this.addToSection(sections, ele)
},
createLoopH(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.SECTION)
var innerHTML = explain.dealLoopLine(item.substring(2))
var sec = this.createEle(ELEMENT_TYPE.SECTION)
sec.innerHTML = innerHTML
sec.style = STYLE.LOOP_H.INN
ele.append(sec)
var span = this.createEle(ELEMENT_TYPE.SPAN)
span.innerText = "<<<左右滑动查看更多>>>"
span.style = "text-align:center;"
ele.append(span)
ele.style = STYLE.LOOP_H.OUT
this.addToSection(sections, ele)
},
createLoopV(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.SECTION)
var strArr = item.split(" ")
var innerHTML = explain.dealLoopLine(item.substring(strArr[0].length))
var sec = this.createEle(ELEMENT_TYPE.SECTION)
sec.innerHTML = innerHTML
sec.style = STYLE.LOOP_V.INN
ele.append(sec)
var span = this.createEle(ELEMENT_TYPE.SPAN)
span.innerText = "<<<上下滑动查看更多>>>"
span.style = "text-align:center;"
ele.append(span)
ele.style = STYLE.LOOP_V.OUT + "height:" + strArr[0].substring(2) + 'px;+width:100%;'
this.addToSection(sections, ele)
},
createRightP(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.P)
var innerHTML = explain.dealLine(item.substring(2))
ele.innerHTML = innerHTML
ele.style = STYLE.RIGHT_P
this.addToSection(sections, ele)
}
,
createCenterP(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.P)
var innerHTML = explain.dealLine(item.substring(2))
ele.innerHTML = innerHTML
ele.style = STYLE.CENTER_P
this.addToSection(sections, ele)
}
,
createP(item, sections) {
var ele = this.createEle(ELEMENT_TYPE.P)
var innerHTML = explain.dealLine(item)
ele.innerHTML = innerHTML
ele.style = STYLE.P
this.addToSection(sections, ele)
}
,
createFootNote(arr, sections) {
if (arr.length == 0) {
return
}
this.createH3("### 参考文献", sections)
var section = this.createEle(ELEMENT_TYPE.SECTION)
arr.forEach((item, index) => {
var span = this.createEle(ELEMENT_TYPE.SPAN)
span.style = STYLE.FOOTNOTE.SPAN
var spanSub = this.createEle(ELEMENT_TYPE.SPAN)
spanSub.style = STYLE.FOOTNOTE.SPAN_SUB
var p = this.createEle(ELEMENT_TYPE.P)
p.style = STYLE.FOOTNOTE.P+" margin: 0;"
var em = this.createEle(ELEMENT_TYPE.EM)
em.style = STYLE.FOOTNOTE.EM
var value = item.split(".content.=")[1].split(".link.=")
spanSub.innerText = "[" + (index + 1) + "]"
var pSpan = this.createEle(ELEMENT_TYPE.SPAN)
pSpan.style = STYLE.FOOTNOTE.P_SPAN
pSpan.innerHTML = value[0]
p.append(pSpan)
p.append(":")
em.innerText = value[1]
p.append(em)
span.append(spanSub)
span.append(p)
section.append(span)
})
section.style = STYLE.FOOTNOTE.SECTION
this.addToSection(sections, section)
}
,
createH(type, item, sections) {
switch (type) {
case "H1": {
this.createH1(item, sections)
break;
}
case "H2": {
this.createH2(item, sections)
break;
}
case "H3": {
this.createH3(item, sections)
break;
}
case "H4": {
this.createH4(item, sections)
break;
}
case "H5": {
this.createH5(item, sections)
break;
}
case "H6": {
this.createH6(item, sections)
break;
}
case "HC1": {
this.createCenterH1(item, sections)
break;
}
case "HC2": {
this.createCenterH2(item, sections)
break;
}
case "HC3": {
this.createCenterH3(item, sections)
break;
}
case "HC4": {
this.createCenterH4(item, sections)
break;
}
case "HC5": {
this.createCenterH5(item, sections)
break;
}
case "HC6": {
this.createCenterH6(item, sections)
break;
}
}
}
,
create(item, sections, explain, isEnd) {
var isH = explain.isH(item)
if (isH[0]) {
this.createH(isH[1], item, sections)
} else if (explain.isQuote1(item)) {
this.createQuote1(item, sections)
} else if (explain.isQuote2(item)) {
this.createQuote2(item, sections)
} else if (explain.isList(item)) {
this.createList(item, sections)
} else if (explain.isCode(item)) {
this.createCode(item, sections, hljs)
} else if (explain.isFormula(item)) {
this.createFormula(item, sections)
} else if (explain.isTable(item)) {
this.createTable(item, sections)
} else if (explain.isDivider(item)) {
this.createDivider(item, sections)
} else if (explain.isCenterP(item)) {
this.createCenterP(item, sections)
} else if (explain.isLoopH(item)) {
this.createLoopH(item, sections)
} else if (explain.isLoopV(item)) {
this.createLoopV(item, sections)
} else if (explain.isLoop(item)) {
this.createLoop(item, sections)
} else if (explain.isRightP(item)) {
this.createRightP(item, sections)
} else {
this.createP(item, sections)
}
if (isEnd) this.createFootNote(explain.getFootNote(), sections)
}
,
createEleId(eleName) {
var random = this.createRandom(10)
return random + (new Date().getTime())
// var section = document.getElementById("view-section")
// switch (eleName) {
// case ELEMENT_TYPE.H1:
// case ELEMENT_TYPE.H2:
// case ELEMENT_TYPE.H3:
// case ELEMENT_TYPE.H4:
// case ELEMENT_TYPE.H5:
// case ELEMENT_TYPE.H6:
// case ELEMENT_TYPE.P:
// case ELEMENT_TYPE.PRE:
// case ELEMENT_TYPE.CODE:
// case ELEMENT_TYPE.SPAN:
// case ELEMENT_TYPE.DIV:
// case ELEMENT_TYPE.UL:
// case ELEMENT_TYPE.LI:
// case ELEMENT_TYPE.BLOCKQUOTE: {
// return eleName + "-" + section.querySelectorAll(eleName).length + "-" + random
// }
// default: {
// return eleName + "-" + section.children.length + "-" + random
// }
// }
}
,
createRandom(len = 5) {
const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
const maxPos = $chars.length;
let str = '';
for (let i = 0; i < len; i++) {
str += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return str;
}
,
addToSection(sections, ele) {
sections.forEach(section => {
section.append(ele.cloneNode(true))
})
}
}
javascriptkatex.css
.katex {
text-rendering: auto;
font: normal 1.21em KaTeX_Main, Times New Roman, serif;
line-height: 1.2;
text-indent: 0;
font-weight: bolder;
}
.katex * {
-ms-high-contrast-adjust: none !important;
border-color: currentColor
}
.katex .katex-version:after {
content: "0.13.13"
}
.katex .katex-mathml {
clip: rect(1px, 1px, 1px, 1px);
border: 0;
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.katex .katex-html > .newline {
display: block
}
.katex .base {
position: relative;
white-space: nowrap;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content
}
.katex .base, .katex .strut {
display: inline-block
}
.katex .textbf {
font-weight: 700
}
.katex .textit {
font-style: italic
}
.katex .textrm {
font-family: KaTeX_Main
}
.katex .textsf {
font-family: KaTeX_SansSerif
}
.katex .texttt {
font-family: KaTeX_Typewriter
}
.katex .mathnormal {
font-family: KaTeX_Math;
font-style: italic
}
.katex .mathit {
font-family: KaTeX_Main;
font-style: italic
}
.katex .mathrm {
font-style: normal
}
.katex .mathbf {
font-family: KaTeX_Main;
font-weight: 700
}
.katex .boldsymbol {
font-family: KaTeX_Math;
font-style: italic;
font-weight: 700
}
.katex .amsrm, .katex .mathbb, .katex .textbb {
font-family: KaTeX_AMS
}
.katex .mathcal {
font-family: KaTeX_Caligraphic
}
.katex .mathfrak, .katex .textfrak {
font-family: KaTeX_Fraktur
}
.katex .mathtt {
font-family: KaTeX_Typewriter
}
.katex .mathscr, .katex .textscr {
font-family: KaTeX_Script
}
.katex .mathsf, .katex .textsf {
font-family: KaTeX_SansSerif
}
.katex .mathboldsf, .katex .textboldsf {
font-family: KaTeX_SansSerif;
font-weight: 700
}
.katex .mathitsf, .katex .textitsf {
font-family: KaTeX_SansSerif;
font-style: italic
}
.katex .mainrm {
font-family: KaTeX_Main;
font-style: normal
}
.katex .vlist-t {
border-collapse: collapse;
display: inline-table;
table-layout: fixed
}
.katex .vlist-r {
display: table-row
}
.katex .vlist {
display: table-cell;
position: relative;
vertical-align: bottom
}
.katex .vlist > span {
display: block;
height: 0;
position: relative
}
.katex .vlist > span > span {
display: inline-block
}
.katex .vlist > span > .pstrut {
overflow: hidden;
width: 0
}
.katex .vlist-t2 {
margin-right: -2px
}
.katex .vlist-s {
display: table-cell;
font-size: 1px;
min-width: 2px;
vertical-align: bottom;
width: 2px
}
.katex .vbox {
align-items: baseline;
display: inline-flex;
flex-direction: column
}
.katex .hbox {
width: 100%
}
.katex .hbox, .katex .thinbox {
display: inline-flex;
flex-direction: row
}
.katex .thinbox {
max-width: 0;
width: 0
}
.katex .msupsub {
text-align: left
}
.katex .mfrac > span > span {
text-align: center
}
.katex .mfrac .frac-line {
border-bottom-style: solid;
display: inline-block;
width: 100%
}
.katex .hdashline, .katex .hline, .katex .mfrac .frac-line, .katex .overline .overline-line, .katex .rule, .katex .underline .underline-line {
min-height: 1px
}
.katex .mspace {
display: inline-block
}
.katex .clap, .katex .llap, .katex .rlap {
position: relative;
width: 0
}
.katex .clap > .inner, .katex .llap > .inner, .katex .rlap > .inner {
position: absolute
}
.katex .clap > .fix, .katex .llap > .fix, .katex .rlap > .fix {
display: inline-block
}
.katex .llap > .inner {
right: 0
}
.katex .clap > .inner, .katex .rlap > .inner {
left: 0
}
.katex .clap > .inner > span {
margin-left: -50%;
margin-right: 50%
}
.katex .rule {
border: 0 solid;
display: inline-block;
position: relative
}
.katex .hline, .katex .overline .overline-line, .katex .underline .underline-line {
border-bottom-style: solid;
display: inline-block;
width: 100%
}
.katex .hdashline {
border-bottom-style: dashed;
display: inline-block;
width: 100%
}
.katex .sqrt > .root {
margin-left: .27777778em;
margin-right: -.55555556em
}
.katex .fontsize-ensurer.reset-size1.size1, .katex .sizing.reset-size1.size1 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size1.size2, .katex .sizing.reset-size1.size2 {
font-size: 1.2em
}
.katex .fontsize-ensurer.reset-size1.size3, .katex .sizing.reset-size1.size3 {
font-size: 1.4em
}
.katex .fontsize-ensurer.reset-size1.size4, .katex .sizing.reset-size1.size4 {
font-size: 1.6em
}
.katex .fontsize-ensurer.reset-size1.size5, .katex .sizing.reset-size1.size5 {
font-size: 1.8em
}
.katex .fontsize-ensurer.reset-size1.size6, .katex .sizing.reset-size1.size6 {
font-size: 2em
}
.katex .fontsize-ensurer.reset-size1.size7, .katex .sizing.reset-size1.size7 {
font-size: 2.4em
}
.katex .fontsize-ensurer.reset-size1.size8, .katex .sizing.reset-size1.size8 {
font-size: 2.88em
}
.katex .fontsize-ensurer.reset-size1.size9, .katex .sizing.reset-size1.size9 {
font-size: 3.456em
}
.katex .fontsize-ensurer.reset-size1.size10, .katex .sizing.reset-size1.size10 {
font-size: 4.148em
}
.katex .fontsize-ensurer.reset-size1.size11, .katex .sizing.reset-size1.size11 {
font-size: 4.976em
}
.katex .fontsize-ensurer.reset-size2.size1, .katex .sizing.reset-size2.size1 {
font-size: .83333333em
}
.katex .fontsize-ensurer.reset-size2.size2, .katex .sizing.reset-size2.size2 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size2.size3, .katex .sizing.reset-size2.size3 {
font-size: 1.16666667em
}
.katex .fontsize-ensurer.reset-size2.size4, .katex .sizing.reset-size2.size4 {
font-size: 1.33333333em
}
.katex .fontsize-ensurer.reset-size2.size5, .katex .sizing.reset-size2.size5 {
font-size: 1.5em
}
.katex .fontsize-ensurer.reset-size2.size6, .katex .sizing.reset-size2.size6 {
font-size: 1.66666667em
}
.katex .fontsize-ensurer.reset-size2.size7, .katex .sizing.reset-size2.size7 {
font-size: 2em
}
.katex .fontsize-ensurer.reset-size2.size8, .katex .sizing.reset-size2.size8 {
font-size: 2.4em
}
.katex .fontsize-ensurer.reset-size2.size9, .katex .sizing.reset-size2.size9 {
font-size: 2.88em
}
.katex .fontsize-ensurer.reset-size2.size10, .katex .sizing.reset-size2.size10 {
font-size: 3.45666667em
}
.katex .fontsize-ensurer.reset-size2.size11, .katex .sizing.reset-size2.size11 {
font-size: 4.14666667em
}
.katex .fontsize-ensurer.reset-size3.size1, .katex .sizing.reset-size3.size1 {
font-size: .71428571em
}
.katex .fontsize-ensurer.reset-size3.size2, .katex .sizing.reset-size3.size2 {
font-size: .85714286em
}
.katex .fontsize-ensurer.reset-size3.size3, .katex .sizing.reset-size3.size3 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size3.size4, .katex .sizing.reset-size3.size4 {
font-size: 1.14285714em
}
.katex .fontsize-ensurer.reset-size3.size5, .katex .sizing.reset-size3.size5 {
font-size: 1.28571429em
}
.katex .fontsize-ensurer.reset-size3.size6, .katex .sizing.reset-size3.size6 {
font-size: 1.42857143em
}
.katex .fontsize-ensurer.reset-size3.size7, .katex .sizing.reset-size3.size7 {
font-size: 1.71428571em
}
.katex .fontsize-ensurer.reset-size3.size8, .katex .sizing.reset-size3.size8 {
font-size: 2.05714286em
}
.katex .fontsize-ensurer.reset-size3.size9, .katex .sizing.reset-size3.size9 {
font-size: 2.46857143em
}
.katex .fontsize-ensurer.reset-size3.size10, .katex .sizing.reset-size3.size10 {
font-size: 2.96285714em
}
.katex .fontsize-ensurer.reset-size3.size11, .katex .sizing.reset-size3.size11 {
font-size: 3.55428571em
}
.katex .fontsize-ensurer.reset-size4.size1, .katex .sizing.reset-size4.size1 {
font-size: .625em
}
.katex .fontsize-ensurer.reset-size4.size2, .katex .sizing.reset-size4.size2 {
font-size: .75em
}
.katex .fontsize-ensurer.reset-size4.size3, .katex .sizing.reset-size4.size3 {
font-size: .875em
}
.katex .fontsize-ensurer.reset-size4.size4, .katex .sizing.reset-size4.size4 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size4.size5, .katex .sizing.reset-size4.size5 {
font-size: 1.125em
}
.katex .fontsize-ensurer.reset-size4.size6, .katex .sizing.reset-size4.size6 {
font-size: 1.25em
}
.katex .fontsize-ensurer.reset-size4.size7, .katex .sizing.reset-size4.size7 {
font-size: 1.5em
}
.katex .fontsize-ensurer.reset-size4.size8, .katex .sizing.reset-size4.size8 {
font-size: 1.8em
}
.katex .fontsize-ensurer.reset-size4.size9, .katex .sizing.reset-size4.size9 {
font-size: 2.16em
}
.katex .fontsize-ensurer.reset-size4.size10, .katex .sizing.reset-size4.size10 {
font-size: 2.5925em
}
.katex .fontsize-ensurer.reset-size4.size11, .katex .sizing.reset-size4.size11 {
font-size: 3.11em
}
.katex .fontsize-ensurer.reset-size5.size1, .katex .sizing.reset-size5.size1 {
font-size: .55555556em
}
.katex .fontsize-ensurer.reset-size5.size2, .katex .sizing.reset-size5.size2 {
font-size: .66666667em
}
.katex .fontsize-ensurer.reset-size5.size3, .katex .sizing.reset-size5.size3 {
font-size: .77777778em
}
.katex .fontsize-ensurer.reset-size5.size4, .katex .sizing.reset-size5.size4 {
font-size: .88888889em
}
.katex .fontsize-ensurer.reset-size5.size5, .katex .sizing.reset-size5.size5 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size5.size6, .katex .sizing.reset-size5.size6 {
font-size: 1.11111111em
}
.katex .fontsize-ensurer.reset-size5.size7, .katex .sizing.reset-size5.size7 {
font-size: 1.33333333em
}
.katex .fontsize-ensurer.reset-size5.size8, .katex .sizing.reset-size5.size8 {
font-size: 1.6em
}
.katex .fontsize-ensurer.reset-size5.size9, .katex .sizing.reset-size5.size9 {
font-size: 1.92em
}
.katex .fontsize-ensurer.reset-size5.size10, .katex .sizing.reset-size5.size10 {
font-size: 2.30444444em
}
.katex .fontsize-ensurer.reset-size5.size11, .katex .sizing.reset-size5.size11 {
font-size: 2.76444444em
}
.katex .fontsize-ensurer.reset-size6.size1, .katex .sizing.reset-size6.size1 {
font-size: .5em
}
.katex .fontsize-ensurer.reset-size6.size2, .katex .sizing.reset-size6.size2 {
font-size: .6em
}
.katex .fontsize-ensurer.reset-size6.size3, .katex .sizing.reset-size6.size3 {
font-size: .7em
}
.katex .fontsize-ensurer.reset-size6.size4, .katex .sizing.reset-size6.size4 {
font-size: .8em
}
.katex .fontsize-ensurer.reset-size6.size5, .katex .sizing.reset-size6.size5 {
font-size: .9em
}
.katex .fontsize-ensurer.reset-size6.size6, .katex .sizing.reset-size6.size6 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size6.size7, .katex .sizing.reset-size6.size7 {
font-size: 1.2em
}
.katex .fontsize-ensurer.reset-size6.size8, .katex .sizing.reset-size6.size8 {
font-size: 1.44em
}
.katex .fontsize-ensurer.reset-size6.size9, .katex .sizing.reset-size6.size9 {
font-size: 1.728em
}
.katex .fontsize-ensurer.reset-size6.size10, .katex .sizing.reset-size6.size10 {
font-size: 2.074em
}
.katex .fontsize-ensurer.reset-size6.size11, .katex .sizing.reset-size6.size11 {
font-size: 2.488em
}
.katex .fontsize-ensurer.reset-size7.size1, .katex .sizing.reset-size7.size1 {
font-size: .41666667em
}
.katex .fontsize-ensurer.reset-size7.size2, .katex .sizing.reset-size7.size2 {
font-size: .5em
}
.katex .fontsize-ensurer.reset-size7.size3, .katex .sizing.reset-size7.size3 {
font-size: .58333333em
}
.katex .fontsize-ensurer.reset-size7.size4, .katex .sizing.reset-size7.size4 {
font-size: .66666667em
}
.katex .fontsize-ensurer.reset-size7.size5, .katex .sizing.reset-size7.size5 {
font-size: .75em
}
.katex .fontsize-ensurer.reset-size7.size6, .katex .sizing.reset-size7.size6 {
font-size: .83333333em
}
.katex .fontsize-ensurer.reset-size7.size7, .katex .sizing.reset-size7.size7 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size7.size8, .katex .sizing.reset-size7.size8 {
font-size: 1.2em
}
.katex .fontsize-ensurer.reset-size7.size9, .katex .sizing.reset-size7.size9 {
font-size: 1.44em
}
.katex .fontsize-ensurer.reset-size7.size10, .katex .sizing.reset-size7.size10 {
font-size: 1.72833333em
}
.katex .fontsize-ensurer.reset-size7.size11, .katex .sizing.reset-size7.size11 {
font-size: 2.07333333em
}
.katex .fontsize-ensurer.reset-size8.size1, .katex .sizing.reset-size8.size1 {
font-size: .34722222em
}
.katex .fontsize-ensurer.reset-size8.size2, .katex .sizing.reset-size8.size2 {
font-size: .41666667em
}
.katex .fontsize-ensurer.reset-size8.size3, .katex .sizing.reset-size8.size3 {
font-size: .48611111em
}
.katex .fontsize-ensurer.reset-size8.size4, .katex .sizing.reset-size8.size4 {
font-size: .55555556em
}
.katex .fontsize-ensurer.reset-size8.size5, .katex .sizing.reset-size8.size5 {
font-size: .625em
}
.katex .fontsize-ensurer.reset-size8.size6, .katex .sizing.reset-size8.size6 {
font-size: .69444444em
}
.katex .fontsize-ensurer.reset-size8.size7, .katex .sizing.reset-size8.size7 {
font-size: .83333333em
}
.katex .fontsize-ensurer.reset-size8.size8, .katex .sizing.reset-size8.size8 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size8.size9, .katex .sizing.reset-size8.size9 {
font-size: 1.2em
}
.katex .fontsize-ensurer.reset-size8.size10, .katex .sizing.reset-size8.size10 {
font-size: 1.44027778em
}
.katex .fontsize-ensurer.reset-size8.size11, .katex .sizing.reset-size8.size11 {
font-size: 1.72777778em
}
.katex .fontsize-ensurer.reset-size9.size1, .katex .sizing.reset-size9.size1 {
font-size: .28935185em
}
.katex .fontsize-ensurer.reset-size9.size2, .katex .sizing.reset-size9.size2 {
font-size: .34722222em
}
.katex .fontsize-ensurer.reset-size9.size3, .katex .sizing.reset-size9.size3 {
font-size: .40509259em
}
.katex .fontsize-ensurer.reset-size9.size4, .katex .sizing.reset-size9.size4 {
font-size: .46296296em
}
.katex .fontsize-ensurer.reset-size9.size5, .katex .sizing.reset-size9.size5 {
font-size: .52083333em
}
.katex .fontsize-ensurer.reset-size9.size6, .katex .sizing.reset-size9.size6 {
font-size: .5787037em
}
.katex .fontsize-ensurer.reset-size9.size7, .katex .sizing.reset-size9.size7 {
font-size: .69444444em
}
.katex .fontsize-ensurer.reset-size9.size8, .katex .sizing.reset-size9.size8 {
font-size: .83333333em
}
.katex .fontsize-ensurer.reset-size9.size9, .katex .sizing.reset-size9.size9 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size9.size10, .katex .sizing.reset-size9.size10 {
font-size: 1.20023148em
}
.katex .fontsize-ensurer.reset-size9.size11, .katex .sizing.reset-size9.size11 {
font-size: 1.43981481em
}
.katex .fontsize-ensurer.reset-size10.size1, .katex .sizing.reset-size10.size1 {
font-size: .24108004em
}
.katex .fontsize-ensurer.reset-size10.size2, .katex .sizing.reset-size10.size2 {
font-size: .28929605em
}
.katex .fontsize-ensurer.reset-size10.size3, .katex .sizing.reset-size10.size3 {
font-size: .33751205em
}
.katex .fontsize-ensurer.reset-size10.size4, .katex .sizing.reset-size10.size4 {
font-size: .38572806em
}
.katex .fontsize-ensurer.reset-size10.size5, .katex .sizing.reset-size10.size5 {
font-size: .43394407em
}
.katex .fontsize-ensurer.reset-size10.size6, .katex .sizing.reset-size10.size6 {
font-size: .48216008em
}
.katex .fontsize-ensurer.reset-size10.size7, .katex .sizing.reset-size10.size7 {
font-size: .57859209em
}
.katex .fontsize-ensurer.reset-size10.size8, .katex .sizing.reset-size10.size8 {
font-size: .69431051em
}
.katex .fontsize-ensurer.reset-size10.size9, .katex .sizing.reset-size10.size9 {
font-size: .83317261em
}
.katex .fontsize-ensurer.reset-size10.size10, .katex .sizing.reset-size10.size10 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size10.size11, .katex .sizing.reset-size10.size11 {
font-size: 1.19961427em
}
.katex .fontsize-ensurer.reset-size11.size1, .katex .sizing.reset-size11.size1 {
font-size: .20096463em
}
.katex .fontsize-ensurer.reset-size11.size2, .katex .sizing.reset-size11.size2 {
font-size: .24115756em
}
.katex .fontsize-ensurer.reset-size11.size3, .katex .sizing.reset-size11.size3 {
font-size: .28135048em
}
.katex .fontsize-ensurer.reset-size11.size4, .katex .sizing.reset-size11.size4 {
font-size: .32154341em
}
.katex .fontsize-ensurer.reset-size11.size5, .katex .sizing.reset-size11.size5 {
font-size: .36173633em
}
.katex .fontsize-ensurer.reset-size11.size6, .katex .sizing.reset-size11.size6 {
font-size: .40192926em
}
.katex .fontsize-ensurer.reset-size11.size7, .katex .sizing.reset-size11.size7 {
font-size: .48231511em
}
.katex .fontsize-ensurer.reset-size11.size8, .katex .sizing.reset-size11.size8 {
font-size: .57877814em
}
.katex .fontsize-ensurer.reset-size11.size9, .katex .sizing.reset-size11.size9 {
font-size: .69453376em
}
.katex .fontsize-ensurer.reset-size11.size10, .katex .sizing.reset-size11.size10 {
font-size: .83360129em
}
.katex .fontsize-ensurer.reset-size11.size11, .katex .sizing.reset-size11.size11 {
font-size: 1em
}
.katex .delimsizing.size1 {
font-family: KaTeX_Size1
}
.katex .delimsizing.size2 {
font-family: KaTeX_Size2
}
.katex .delimsizing.size3 {
font-family: KaTeX_Size3
}
.katex .delimsizing.size4 {
font-family: KaTeX_Size4
}
.katex .delimsizing.mult .delim-size1 > span {
font-family: KaTeX_Size1
}
.katex .delimsizing.mult .delim-size4 > span {
font-family: KaTeX_Size4
}
.katex .nulldelimiter {
display: inline-block;
width: .12em
}
.katex .delimcenter, .katex .op-symbol {
position: relative
}
.katex .op-symbol.small-op {
font-family: KaTeX_Size1
}
.katex .op-symbol.large-op {
font-family: KaTeX_Size2
}
.katex .accent > .vlist-t, .katex .op-limits > .vlist-t {
text-align: center
}
.katex .accent .accent-body {
position: relative
}
.katex .accent .accent-body:not(.accent-full) {
width: 0
}
.katex .overlay {
display: block
}
.katex .mtable .vertical-separator {
display: inline-block;
min-width: 1px
}
.katex .mtable .arraycolsep {
display: inline-block
}
.katex .mtable .col-align-c > .vlist-t {
text-align: center
}
.katex .mtable .col-align-l > .vlist-t {
text-align: left
}
.katex .mtable .col-align-r > .vlist-t {
text-align: right
}
.katex .svg-align {
text-align: left
}
.katex svg {
fill: currentColor;
stroke: currentColor;
fill-rule: nonzero;
fill-opacity: 1;
stroke-width: 1;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
display: block;
height: inherit;
position: absolute;
width: 100%
}
.katex svg path {
stroke: none
}
.katex img {
border-style: none;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0
}
.katex .stretchy {
display: block;
overflow: hidden;
position: relative;
width: 100%
}
.katex .stretchy:after, .katex .stretchy:before {
content: ""
}
.katex .hide-tail {
overflow: hidden;
position: relative;
width: 100%
}
.katex .halfarrow-left {
left: 0;
overflow: hidden;
position: absolute;
width: 50.2%
}
.katex .halfarrow-right {
overflow: hidden;
position: absolute;
right: 0;
width: 50.2%
}
.katex .brace-left {
left: 0;
overflow: hidden;
position: absolute;
width: 25.1%
}
.katex .brace-center {
left: 25%;
overflow: hidden;
position: absolute;
width: 50%
}
.katex .brace-right {
overflow: hidden;
position: absolute;
right: 0;
width: 25.1%
}
.katex .x-arrow-pad {
padding: 0 .5em
}
.katex .cd-arrow-pad {
padding: 0 .55556em 0 .27778em
}
.katex .mover, .katex .munder, .katex .x-arrow {
text-align: center
}
.katex .boxpad {
padding: 0 .3em
}
.katex .fbox, .katex .fcolorbox {
border: .04em solid;
box-sizing: border-box
}
.katex .cancel-pad {
padding: 0 .2em
}
.katex .cancel-lap {
margin-left: -.2em;
margin-right: -.2em
}
.katex .sout {
border-bottom-style: solid;
border-bottom-width: .08em
}
.katex .angl {
border-right: .049em solid;
border-top: .049em solid;
box-sizing: border-box;
margin-right: .03889em
}
.katex .anglpad {
padding: 0 .03889em
}
.katex .eqn-num:before {
content: "(" counter(katexEqnNo) ")";
counter-increment: katexEqnNo
}
.katex .mml-eqn-num:before {
content: "(" counter(mmlEqnNo) ")";
counter-increment: mmlEqnNo
}
.katex .mtr-glue {
width: 50%
}
.katex .cd-vert-arrow {
display: inline-block;
position: relative
}
.katex .cd-label-left {
display: inline-block;
position: absolute;
right: calc(50% + .3em);
text-align: left
}
.katex .cd-label-right {
display: inline-block;
left: calc(50% + .3em);
position: absolute;
text-align: right
}
.katex-display {
display: block;
margin: 1em 0;
text-align: center
}
.katex-display > .katex {
display: block;
text-align: center;
white-space: nowrap
}
.katex-display > .katex > .katex-html {
display: block;
position: relative
}
.katex-display > .katex > .katex-html > .tag {
position: absolute;
right: 0
}
.katex-display.leqno > .katex > .katex-html > .tag {
left: 0;
right: auto
}
.katex-display.fleqn > .katex {
padding-left: 2em;
text-align: left
}
body {
counter-reset: katexEqnNo mmlEqnNo
}
cssstyle.js
const FONT_FAMILY = "font-family:Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, \"PingFang SC\", Cambria, Cochin, Georgia, Times, \"Times New Roman\", serif;"
const FONT_WEIGHT = "font-weight:bold;"
const MARGIN = "margin:20px 0;"
const PADDING = {
X5: "padding-left:5px"
}
const BOX_SHADOW = "box-shadow: rgba(0, 0, 0, 0.52) 0px 2px 10px;"
const COLOR = {
FONT: "color:#492872;",
_020202: "color:#020202;"
}
const STYLE1 = {
H1: "border-left:5px solid ;word-break:break-all;margin:35px 5px 25px 5px ;font-size:24px;" + FONT_FAMILY + FONT_WEIGHT + COLOR.FONT + PADDING.X5,
H2: "border-left:4px solid ;word-break:break-all;margin:35px 5px 25px 5px ;font-size:22px;" + FONT_FAMILY + FONT_WEIGHT + COLOR.FONT + PADDING.X5,
H3: "border-left:4px solid ;word-break:break-all;margin:30px 5px 20px 5px ;font-size:20px;" + FONT_FAMILY + FONT_WEIGHT + COLOR.FONT + PADDING.X5,
H4: "border-left:3px solid ;word-break:break-all;margin:30px 5px 20px 5px ;font-size:19px;" + FONT_FAMILY + FONT_WEIGHT + COLOR.FONT + PADDING.X5,
H5: "border-left:2px solid ;word-break:break-all;margin:25px 5px 15px 5px ;font-size:18px;" + FONT_FAMILY + FONT_WEIGHT + COLOR.FONT + PADDING.X5,
H6: "word-break:break-all;margin:25px 5px 15px 5px ;font-size:17px;" + FONT_FAMILY + FONT_WEIGHT + MARGIN,
CENTER_H1: "text-align:center;border-bottom:1px solid ;word-break:break-all;margin:30px 5px;font-size:30px;" + FONT_FAMILY + FONT_WEIGHT + COLOR.FONT,
CENTER_H2: "text-align:center;border-bottom:1px solid ;word-break:break-all;margin:20px 5px;font-size:27px;" + FONT_FAMILY + FONT_WEIGHT + COLOR.FONT,
CENTER_H3: "text-align:center;border-bottom:1px solid ;word-break:break-all;margin:15px 5px;font-size:24px;" + FONT_FAMILY + FONT_WEIGHT + COLOR.FONT,
CENTER_H4: "text-align:center;word-break:break-all;margin:15px 5px;font-size:21px;" + FONT_FAMILY + FONT_WEIGHT + COLOR.FONT,
CENTER_H5: "text-align:center;word-break:break-all;margin:10px 5px;font-size:19px;" + FONT_FAMILY + FONT_WEIGHT + COLOR.FONT,
CENTER_H6: "word-break:break-all;margin:5px 5px;font-size:17px;" + FONT_FAMILY + FONT_WEIGHT + MARGIN,
P: "text-indent:10px ;word-break:break-all;margin:5px;font-size:16px;letter-spacing:1px;line-height:30px;padding:2px 0;" + FONT_FAMILY + MARGIN + COLOR._020202,
BLOCKQUOTE1: "border-left:8px solid #4385d394;border-radius: 7px;word-break:break-all;margin:5px;font-size:16px;letter-spacing:1px;background:#b8ccdb2e;padding: 18px 10px 18px 20px;margin: 20px 0;" + FONT_FAMILY + COLOR._020202,
BLOCKQUOTE1_2: "border-left:8px solid #4385d394 ;border-radius: 7px;word-break:break-all;margin:5px;font-size:16px;letter-spacing:1px;background:#b8ccdb2e;padding: 18px 10px 18px 20px;margin: 5px 0;" + FONT_FAMILY + COLOR._020202,
BLOCKQUOTE2: "word-break:break-all;margin:5px;font-size:16px;letter-spacing:1px;padding:20px;box-shadow: 1px 1px 10px rgb(0 0 0 / 20%);" + FONT_FAMILY + MARGIN + COLOR._020202,
BLOCKQUOTE_P: "word-break:break-all;margin:5px;font-size:16px;letter-spacing:1px;padding: 8px 0;line-height:20px;" + FONT_FAMILY + COLOR._020202,
DIVIDER: "border-bottom:1px solid #02020222;" + MARGIN,
PRE: "border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;" + BOX_SHADOW + MARGIN,
CODE: "overflow-x: auto; color: #abb2bf; display: -webkit-box; font-size: 15px; -webkit-overflow-scrolling: touch; background: #282c34; border-radius: 5px;font-family: Consolas,Menlo,Courier;",
CODE_PREFIX: "display: block;background: url(http://hyz.cool/svg/apple_code_title.svg) 10px 10px / 40px no-repeat rgb(40, 44, 52);height: 30px;margin-bottom: -7px;border-top-left-radius: 5px;border-top-right-radius: 5px;",
CODE_PREFIX_WECHAT: "display: block;background: url(https://mmbiz.qpic.cn/mmbiz_svg/574VdhMFwaEZwAG5R9lQWiabE1oYxOquSq4pgPjibibmZDgIFiaWhAhDrDhFRRJQ0BkEib8iaFYH6u7MtaF5hTgIL2U2gMmhVTKev3/640?wx_fmt=svg;) 10px 10px / 40px no-repeat rgb(40, 44, 52);height: 30px;margin-bottom: -7px;border-radius: 5px;",
UL: "padding-left:25px;" + FONT_FAMILY + MARGIN,
LI: "word-break:break-all;margin:5px;font-size:16px;letter-spacing:1px;" + FONT_FAMILY + MARGIN + COLOR._020202,
MARK: "word-break:break-all;margin:5px;font-size:16px;letter-spacing:1px;word-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin: 0 2px;color: #1e6bb8;background-color: rgba(27,31,35,.05);" + FONT_FAMILY + MARGIN,
FIGURE: "display:flex;flex-direction:column;justify-content:center;;align-items:center;text-align: center;position: relative;",
LINK: "text-decoration: none;color:#38ade4;border-bottom: 1px solid #38ade4;" + FONT_WEIGHT,
LINK_SUP: "color:#38ade4;" + FONT_WEIGHT,
IMG: "width:80%;box-shadow:0px 0px 6px 0px #0000006b;margin:10px 0;",
FIGURE_FIGCAPTION: "margin-top: 5px;text-align: center;color: #888;font-size: 14px;" + FONT_FAMILY,
CENTER_P: "word-break:break-all;margin:5px;font-size:16px;letter-spacing:1px;line-height:25px;" + FONT_FAMILY + MARGIN + COLOR._020202 + "text-align:center;",
RIGHT_P: "word-break:break-all;margin:5px;font-size:16px;letter-spacing:1px;line-height:25px;" + FONT_FAMILY + MARGIN + COLOR._020202 + "text-align:right;",
TABLE: "width:100%;" + FONT_FAMILY,
THEAD: FONT_WEIGHT,
TR: "min-width: 85px;",
TH: "min-width: 85px;background:#ebecec78; border-bottom: 1px solid #ddd;margin:10px 0;height:40px;padding: 5px;",
TD: "min-width: 85px;background:#ebecec78; border-bottom: 1px solid #ddd;height:40px;padding: 5px;",
FOOTNOTE: {
SECTION: "word-break:break-all;margin:5px;font-size:16px;letter-spacing:1px;line-height:30px;padding:2px 0;" + FONT_FAMILY + MARGIN + COLOR._020202,
SPAN: "display: flex;",
SPAN_SUB: "display: flex;margin-right:5px;word-break: keep-all;",
P: "margin:5px;",
P_SPAN: "border-bottom: 1px solid ;" + FONT_WEIGHT,
EM: "margin:0 10px;"
},
LOOP_H:{
OUT:"display: flex;flex-direction: column;overflow:hidden;"+MARGIN,
INN:"display:flex;flex-direction:row;overflow-x:scroll;"
},
LOOP_V:{
OUT:"display: flex;flex-direction: column;overflow:hidden;"+MARGIN,
INN:"display:flex;flex-direction:column;overflow-y:scroll;"
}
}
javascript
