Skip to content

Awesome-Markdown-Editor
Awesome-Markdown-Editor

折羽之殇 / Awesome-Markdown-Editor
与 Fork 源项目一致

Fork自 gitcode_dev / Awesome-Markdown-Editor

通知 1
Star 1
Fork 0
Awesome-Markdown-Editor
Awesome-Markdown-Editor

体验新版 GitCode，发现更多精彩内容 >>

提交 587c2d55 编写于 作者: 璃白.'s avatar 璃白. 🌻
浏览文件
操作

feat:添加tooltip及代码高亮

上级 424fcf88
隐藏空白更改
内联 并排
Showing with 443 addition and 378 deletion
package.json
浏览文件 @ 587c2d55
......@@ -16,7 +16,9 @@
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"highlight.js": "^11.0.1",
"marked": "^2.0.6",
"vtip": "^1.0.6",
"vue": "^2.6.12",
"vuex": "^3.6.2"
}
......
src/assets/style/markdown.less
浏览文件 @ 587c2d55
......@@ -10,118 +10,399 @@
.htmledit_views {
font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
img {
max-width: 100%;
height: auto;
&.right {
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
&.left {
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
&.mathcode {
margin: 0 8px;
}
}
.marker {
background-color: #ff0;
}
figure {
text-align: center;
margin: 0 24px;
display: inline-block;
& > figcaption {
text-align: center;
margin: 8px;
color: #999;
font-size: 14px;
display: block;
}
}
a {
color: #4ea1db;
text-decoration: none;
& > img {
padding: 1px;
margin: 1px;
border: none;
outline: #0782c1 solid 1px;
}
&:visited {
color: #6795b5;
}
}
.code-featured {
border: 5px solid red;
}
.math-featured {
padding: 20px;
box-shadow: 0 0 2px rgba(200, 0, 0, 1);
background-color: rgba(255, 0, 0, 0.05);
margin: 10px;
}
.image-clean {
border: 0;
background: 0 0;
padding: 0;
& > figcaption {
font-size: 0.9em;
text-align: right;
}
}
.image-grayscale {
background-color: #fff;
color: #666;
}
.embed-240p {
max-width: 426px;
max-height: 240px;
margin: 0 auto;
}
.embed-360p {
max-width: 640px;
max-height: 360px;
margin: 0 auto;
}
.embed-480p {
max-width: 854px;
max-height: 480px;
margin: 0 auto;
}
.embed-720p {
max-width: 1280px;
max-height: 720px;
margin: 0 auto;
}
.embed-1080p {
max-width: 1920px;
max-height: 1080px;
margin: 0 auto;
}
p {
font-size: 18px;
color: #4d4d4d;
font-weight: 400;
line-height: 26px !important;
margin: 0 0 16px;
overflow-x: auto;
overflow-y: hidden;
}
* {
box-sizing: border-box;
}
ul {
ol {
margin: 0 0 24px 32px;
}
li {
list-style-type: disc;
margin: 8px 0 0 32px;
}
}
ol {
li {
list-style-type: decimal;
margin-left: 40px;
margin-top: 8px;
}
}
h1 {
font-size: 28px;
line-height: 36px;
}
h2 {
font-size: 24px;
line-height: 32px;
}
h3 {
font-size: 22px;
line-height: 30px;
}
h4 {
font-size: 20px;
line-height: 28px;
}
h5 {
font-size: 18px;
line-height: 26px;
}
h6 {
font-size: 16px;
line-height: 24px;
}
blockquote {
display: block;
padding: 16px 16px 0;
margin: 0 0 24px;
border-left: 8px solid #dddfe4;
background: #eef0f4;
overflow: auto;
overflow-scrolling: touch;
word-wrap: normal;
word-break: normal;
p {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin-bottom: 16px;
color: #4f4f4f;
}
}
hr {
margin: 24px 0;
border: none;
border-bottom: solid #ccc 1px;
}
table {
border-collapse: collapse;
display: table;
width: 100%;
text-align: left;
margin-bottom: 24px;
margin-left: auto;
margin-right: auto;
tr {
border: 0;
border-top: 1px solid #ddd;
background-color: #fff;
&:nth-child(2n) {
background-color: #f7f7f7;
}
th {
font-weight: 700;
background-color: #eff3f5;
p {
font-weight: 700;
}
}
}
}
tbody {
border: 0;
}
dl {
margin: 24px;
dt {
margin: 8px;
font-weight: 700;
dd {
margin: 8px;
}
}
dd {
margin: 0 0 8px 40px;
}
}
.initialism {
font-size: 90%;
text-transform: uppercase;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
margin: 0 0 24px;
overflow-x: auto;
// padding: 8px;
code {
display: block;
line-height: 22px;
overflow-x: auto;
white-space: pre;
word-wrap: normal;
border-radius: 4px;
padding: 8px;
tab-size: 4;
code {
&.hljs {
padding: 0;
}
}
&:not(.hljs) {
background-color: #f3f4f5;
}
}
}
code {
border-radius: 4px;
display: inline-block;
background-color: #f3f4f5;
padding: 2px 6px;
font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
ol {
margin: 0;
overflow: hidden;
li {
list-style-type: none;
margin-left: 0;
margin-top: 0;
height: 22px;
div {
&.hljs-ln-code {
margin-left: 8px;
}
&.hljs-ln-numbers {
width: 24px;
border-right: 1px solid #c5c5c5;
.hljs-ln-line {
word-wrap: normal;
}
}
}
}
&.hundred {
li {
div {
&.hljs-ln-numbers {
width: 30px;
}
}
}
}
&.thousand {
li {
div {
&.hljs-ln-numbers {
width: 36px;
}
}
}
}
}
}
.hot-keyword {
&:visited {
color: #3399ea;
}
}
.footnote {
vertical-align: top;
position: relative;
top: -4px;
font-size: 12px;
}
.MathJax_SVG_Display {
text-align: center;
margin: 24px 0;
font-size: 18px;
font-weight: 400;
color: #4f4f4f;
position: relative;
text-indent: 0;
max-width: none;
max-height: none;
min-width: 0;
min-height: 0;
width: 100%;
}
.prettyprint {
.pre-numbering {
position: absolute;
width: 48px;
background-color: #eef0f4;
top: 0;
left: 0;
margin: 0;
padding: 8px 0;
list-style: none;
text-align: right;
}
}
.pre-numbering {
li {
padding: 0 8px;
list-style: none;
margin: 0;
}
}
kbd {
padding: 2px 8px;
border: 1px solid rgba(63, 63, 63, 0.25);
box-shadow: 0 1px 0 rgba(63, 63, 63, 0.25);
background-color: #fff;
color: #333;
border-radius: 4px;
display: inline-block;
margin: 0 2px;
white-space: nowrap;
}
.dp-highlighter {
font-size: 12px;
text-align: left;
margin: 0 0 24px;
}
.csdn-data-video {
width: 200px;
img {
margin: 0;
display: block;
width: 200px;
height: 112px;
}
p {
margin-top: 10px;
margin-bottom: 0;
font-size: 14px;
}
}
pre[data-from="code-for-outside"] {
overflow: hidden;
code {
overflow-x: auto;
overflow-y: hidden;
* {
overflow: visible;
overflow-wrap: break-word;
}
}
p {
code {
padding: 0;
}
}
}
}
.cke_editable {
margin: 24px;
word-wrap: break-word;
}
.htmledit_views img.right {
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.htmledit_views img.left {
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.htmledit_views .marker {
background-color: #ff0;
}
.htmledit_views figure {
text-align: center;
margin: 0 24px;
display: inline-block;
}
.htmledit_views figure > figcaption {
text-align: center;
margin: 8px;
color: #999;
font-size: 14px;
display: block;
}
.htmledit_views a > img {
padding: 1px;
margin: 1px;
border: none;
outline: #0782c1 solid 1px;
}
.htmledit_views .code-featured {
border: 5px solid red;
}
.htmledit_views .math-featured {
padding: 20px;
box-shadow: 0 0 2px rgba(200, 0, 0, 1);
background-color: rgba(255, 0, 0, 0.05);
margin: 10px;
}
.htmledit_views .image-clean {
border: 0;
background: 0 0;
padding: 0;
}
.htmledit_views .image-clean > figcaption {
font-size: 0.9em;
text-align: right;
}
.htmledit_views .image-grayscale {
background-color: #fff;
color: #666;
}
.htmledit_views .image-grayscale img,
.htmledit_views img.image-grayscale {
filter: grayscale(100%);
}
.htmledit_views .embed-240p {
max-width: 426px;
max-height: 240px;
margin: 0 auto;
}
.htmledit_views .embed-360p {
max-width: 640px;
max-height: 360px;
margin: 0 auto;
}
.htmledit_views .embed-480p {
max-width: 854px;
max-height: 480px;
margin: 0 auto;
}
.htmledit_views .embed-720p {
max-width: 1280px;
max-height: 720px;
margin: 0 auto;
}
.htmledit_views .embed-1080p {
max-width: 1920px;
max-height: 1080px;
margin: 0 auto;
}
.htmledit_views p {
font-size: 18px;
color: #4d4d4d;
font-weight: 400;
line-height: 26px !important;
margin: 0 0 16px;
overflow-x: auto;
overflow-y: hidden;
}
p[align="center"] {
text-align: center;
}
.htmledit_views img {
max-width: 100%;
height: auto;
}
.htmledit_views strong,
.htmledit_views strong span {
font-weight: 700;
}
.htmledit_views * {
box-sizing: border-box;
}
.htmledit_views h1,
.htmledit_views h2,
.htmledit_views h3,
......@@ -138,53 +419,6 @@ p[align="center"] {
padding: 0;
font-size: 16px;
}
.htmledit_views ul ol {
margin: 0 0 24px 32px;
}
.htmledit_views ul li {
list-style-type: disc;
margin: 8px 0 0 32px;
}
.htmledit_views ol li {
list-style-type: decimal;
margin-left: 40px;
margin-top: 8px;
}
.htmledit_views h1 {
font-size: 28px;
line-height: 36px;
}
.htmledit_views h2 {
font-size: 24px;
line-height: 32px;
}
.htmledit_views h3 {
font-size: 22px;
line-height: 30px;
}
.htmledit_views h4 {
font-size: 20px;
line-height: 28px;
}
.htmledit_views h5 {
font-size: 18px;
line-height: 26px;
}
.htmledit_views h6 {
font-size: 16px;
line-height: 24px;
}
.htmledit_views blockquote {
display: block;
padding: 16px 16px 0;
margin: 0 0 24px;
border-left: 8px solid #dddfe4;
background: #eef0f4;
overflow: auto;
overflow-scrolling: touch;
word-wrap: normal;
word-break: normal;
}
.htmledit_views blockquote ol,
.htmledit_views blockquote ul {
margin-bottom: 16px;
......@@ -196,38 +430,6 @@ p[align="center"] {
.htmledit_views blockquote ul li {
margin-bottom: 0;
}
.htmledit_views blockquote p {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin-bottom: 16px;
color: #4f4f4f;
}
.htmledit_views hr {
margin: 24px 0;
border: none;
border-bottom: solid #ccc 1px;
}
.htmledit_views table tr {
border: 0;
border-top: 1px solid #ddd;
background-color: #fff;
}
.htmledit_views table {
border-collapse: collapse;
display: table;
width: 100%;
text-align: left;
margin-bottom: 24px;
margin-left: auto;
margin-right: auto;
}
.htmledit_views tbody {
border: 0;
}
.htmledit_views table tr:nth-child(2n) {
background-color: #f7f7f7;
}
.htmledit_views table tr td,
.htmledit_views table tr th {
border: 1px solid #ddd;
......@@ -246,50 +448,19 @@ p[align="center"] {
text-align: left;
line-height: 22px;
}
.htmledit_views table tr th p {
font-weight: 700;
}
.htmledit_views table tr td code,
.htmledit_views table tr th code {
white-space: normal;
word-break: break-word;
}
.htmledit_views table tr th {
font-weight: 700;
background-color: #eff3f5;
}
.htmledit_views dl {
margin: 24px;
}
.htmledit_views dl dt {
margin: 8px;
font-weight: 700;
}
.htmledit_views dl dt dd {
margin: 8px;
}
.htmledit_views abbr[data-original-title],
.htmledit_views abbr[title] {
cursor: help;
border-bottom: 1px dotted #999;
}
.htmledit_views .initialism {
font-size: 90%;
text-transform: uppercase;
}
.htmledit_views pre {
white-space: pre-wrap;
word-wrap: break-word;
margin: 0 0 24px;
overflow-x: auto;
padding: 8px;
}
.marker {
background-color: #ff0;
}
htmledit_views img.mathcode {
margin: 0 8px;
}
.htmledit_views kbd,
.htmledit_views pre,
.htmledit_views samp {
......@@ -307,29 +478,10 @@ htmledit_views img.mathcode {
"Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata,
Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.htmledit_views code {
border-radius: 4px;
}
.htmledit_views a {
color: #4ea1db;
text-decoration: none;
}
.htmledit_views a:focus,
.htmledit_views a:hover {
color: #ca0c16;
}
.htmledit_views a:visited {
color: #6795b5;
}
.htmledit_views .hot-keyword:visited {
color: #3399ea;
}
.htmledit_views .footnote {
vertical-align: top;
position: relative;
top: -4px;
font-size: 12px;
}
.htmledit_views .flow-chart,
.htmledit_views .sequence-diagram {
text-align: center;
......@@ -348,36 +500,6 @@ htmledit_views img.mathcode {
.htmledit_views .sequence-diagram [stroke="#000000"] {
stroke: #4f4f4f;
}
.htmledit_views .MathJax_SVG_Display {
text-align: center;
margin: 24px 0;
font-size: 18px;
font-weight: 400;
color: #4f4f4f;
position: relative;
text-indent: 0;
max-width: none;
max-height: none;
min-width: 0;
min-height: 0;
width: 100%;
}
.htmledit_views pre code {
display: block;
line-height: 22px;
overflow-x: auto;
white-space: pre;
word-wrap: normal;
border-radius: 4px;
padding: 8px;
tab-size: 4;
}
.htmledit_views pre code code.hljs {
padding: 0;
}
.htmledit_views pre code:not(.hljs) {
background-color: #f3f4f5;
}
.htmledit_views pre code,
.htmledit_views pre code div,
.htmledit_views pre code span {
......@@ -390,97 +512,12 @@ htmledit_views img.mathcode {
background-color: #f6f8fa;
border: none;
}
.htmledit_views .prettyprint .pre-numbering {
position: absolute;
width: 48px;
background-color: #eef0f4;
top: 0;
left: 0;
margin: 0;
padding: 8px 0;
list-style: none;
text-align: right;
}
.htmledit_views .pre-numbering li {
padding: 0 8px;
list-style: none;
margin: 0;
}
.htmledit_views dl dd {
margin: 0 0 8px 40px;
}
.htmledit_views kbd {
padding: 2px 8px;
border: 1px solid rgba(63, 63, 63, 0.25);
box-shadow: 0 1px 0 rgba(63, 63, 63, 0.25);
background-color: #fff;
color: #333;
border-radius: 4px;
display: inline-block;
margin: 0 2px;
white-space: nowrap;
}
.htmledit_views .dp-highlighter {
font-size: 12px;
text-align: left;
margin: 0 0 24px;
}
.htmledit_views code ol {
margin: 0;
overflow: hidden;
}
.htmledit_views code ol li {
list-style-type: none;
margin-left: 0;
margin-top: 0;
height: 22px;
}
.htmledit_views code ol li div.hljs-ln-code {
margin-left: 8px;
}
.htmledit_views code ol li div.hljs-ln-code,
.htmledit_views code ol li div.hljs-ln-numbers {
float: left;
height: 22px;
}
.htmledit_views code ol li div.hljs-ln-numbers {
width: 24px;
border-right: 1px solid #c5c5c5;
}
.htmledit_views code ol li div.hljs-ln-numbers .hljs-ln-line {
word-wrap: normal;
}
.htmledit_views code ol.hundred li div.hljs-ln-numbers {
width: 30px;
}
.htmledit_views code ol.thousand li div.hljs-ln-numbers {
width: 36px;
}
.htmledit_views .csdn-data-video {
width: 200px;
}
.htmledit_views .csdn-data-video img {
margin: 0;
display: block;
width: 200px;
height: 112px;
}
.htmledit_views .csdn-data-video p {
margin-top: 10px;
margin-bottom: 0;
font-size: 14px;
}
.htmledit_views pre[data-from="code-for-outside"] {
overflow: hidden;
}
.htmledit_views pre[data-from="code-for-outside"] code {
overflow-x: auto;
overflow-y: hidden;
}
.htmledit_views pre[data-from="code-for-outside"] code * {
overflow: visible;
overflow-wrap: break-word;
}
.htmledit_views pre[data-from="code-for-outside"] p code {
padding: 0;
.htmledit_views pre code .hljs-comment {
color: green;
}
src/components/content/md-preview.vue
浏览文件 @ 587c2d55
......@@ -6,6 +6,7 @@
<script>
import { mapState, mapMutations } from "vuex";
import marked from "marked";
import "highlight.js/styles/github.css";
export default {
data() {
return {};
......@@ -16,6 +17,12 @@ export default {
methods: {
...mapMutations(["setHtml"]),
transferMarkdown(val) {
marked.setOptions({
highlight: function(code, lang, callback) {
const html = require("highlight.js").highlightAuto(code).value;
return html;
}
});
if (!val.trim()) return;
const html = marked(val);
this.setHtml(html);
......
src/components/header/tool-button.vue
浏览文件 @ 587c2d55
<template>
<div @click="handleTool(info.name)" class="tool_button">
<div
v-tip.top="info.tip"
@click="handleTool(info.name, info.startStr, info.endStr)"
class="tool_button"
>
<span :class="['icon iconfont', `icon-${info.icon}`]"></span>
</div>
</template>
......@@ -18,44 +22,26 @@ export default {
},
methods: {
...mapMutations(["setFullScreen", "setText", "setUlNum"]),
handleTool(type) {
handleTool(type, startStr, endStr) {
switch (type) {
case "bold":
this.updateText("**", "**");
break;
case "italic":
this.updateText("_", "_");
break;
case "quote":
this.updateText("\n> ", "");
break;
case "code":
this.updateText("`", "`");
break;
case "link":
this.updateText("[", "](url)");
break;
case "ul":
this.updateText("\n- ", "");
case "task":
case "table":
this.updateText(startStr, endStr);
break;
case "ol":
let ulNum = this.ulNum;
this.updateText(`\n${ulNum++}. `, "");
this.setUlNum(ulNum);
break;
case "task":
this.updateText("\n- [ ] ", "");
break;
case "table":
this.updateText(
`\n\n| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |\n\n`,
""
);
break;
case "fullScreen":
this.setFullScreen(true);
break;
default:
break;
}
......
src/main.js
浏览文件 @ 587c2d55
import Vue from "vue";
import App from "./App";
import store from "./store";
import Vtip from "vtip";
import "vtip/lib/index.min.css";
import { initStyle, isNotEmpty } from "@/assets/js/utils";
import "@/assets/style/global.less";
Vue.use(Vtip.directive);
function initMdEditor(obj) {
const { el, onChange, canAttachFile, themeOptions } = obj;
if (!el || !document.querySelector(el)) throw new Error("请指定容器");
......
src/store/index.js
浏览文件 @ 587c2d55
......@@ -12,47 +12,76 @@ export default new Vuex.Store({
{
name: "bold",
icon: "bold",
format: "**"
tip: "粗体",
startStr: "**",
endStr: "**"
},
{
name: "italic",
icon: "italic"
icon: "italic",
tip: "斜体",
startStr: "_",
endStr: "_"
},
{
name: "quote",
icon: "baojiaquotation"
icon: "baojiaquotation",
tip: "插入引用",
startStr: "\n> ",
endStr: ""
},
{
name: "code",
icon: "code"
icon: "code",
tip: "插入代码",
startStr: "`",
endStr: "`"
},
{
name: "link",
icon: "lianjie"
icon: "lianjie",
tip: "添加链接",
startStr: "[",
endStr: "](url)"
},
{
name: "ul",
icon: "unorderedList"
icon: "unorderedList",
tip: "添加无序列表",
startStr: "\n- ",
endStr: ""
},
{
name: "ol",
icon: "youxuliebiao"
icon: "youxuliebiao",
tip: "添加有序列表",
startStr: "",
endStr: ""
},
{
name: "task",
icon: "renwu"
icon: "renwu",
tip: "添加任务列表",
startStr: "\n- [ ] ",
endStr: ""
},
{
name: "table",
icon: "biaoge"
icon: "biaoge",
tip: "添加表格",
startStr:
"\n\n| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |\n\n",
endStr: ""
},
{
name: "fullScreen",
icon: "fullScreen"
icon: "fullScreen",
tip: "全屏模式"
}
],
ulNum: 1,
text: "# 456456456\n## 4657567\n3456456456456",
text:
"# 456456456\n## 4657567\n3456`456`4\n```js\nfunction fn() {\n return null;\n}\n```\n56456",
selectionInfo: "",
html: "",
canAttachFile: true
......
webpack.config.js
浏览文件 @ 587c2d55
......@@ -23,7 +23,7 @@ module.exports = {
loader: "vue-loader"
},
{
test: /\.less$/i,
test: /\.(less|css)$/i,
use: ["style-loader", "css-loader", "less-loader"]
},
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或