feat: 优化md优化
This commit is contained in:
539943419 committed
1 parent
5e254af81f
commit
2e5203c69a
3 files changed
+215
-6
No files matched your search
@@ -63,7 +63,7 @@ const VNodeArr = computed(() => {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
const res = h2v.rander(renderedData)
|
const res = h2v.render(renderedData)
|
||||||
return {
|
return {
|
||||||
setup: () => {
|
setup: () => {
|
||||||
return () => res
|
return () => res
|
||||||
@@ -92,11 +92,167 @@ const VNodeArr = computed(() => {
|
|||||||
|
|
||||||
hr {
|
hr {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 1em 0;
|
||||||
|
padding-top: 1em;
|
||||||
unicode-bidi: isolate;
|
unicode-bidi: isolate;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-style: inset;
|
height: auto;
|
||||||
border-width: 0;
|
}
|
||||||
|
|
||||||
|
/* 恢复标题样式 */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.25;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
border-bottom: 1px solid #eaecef;
|
||||||
|
padding-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
border-bottom: 1px solid #eaecef;
|
||||||
|
padding-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 0.875em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 0.85em;
|
||||||
|
color: #6a737d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 恢复段落样式 */
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 恢复列表样式 */
|
||||||
|
ul, ol {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
padding-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
li > ul, li > ol {
|
||||||
|
margin-top: 0.25em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 恢复链接样式 */
|
||||||
|
a {
|
||||||
|
color: #0366d6;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 恢复引用块样式 */
|
||||||
|
blockquote {
|
||||||
|
margin: 0 0 1em;
|
||||||
|
padding: 0 1em;
|
||||||
|
color: #6a737d;
|
||||||
|
border-left: 0.25em solid #dfe2e5;
|
||||||
|
|
||||||
|
> :first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> :last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 恢复表格样式 */
|
||||||
|
table {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 6px 13px;
|
||||||
|
border: 1px solid #dfe2e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 6px 13px;
|
||||||
|
border: 1px solid #dfe2e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr {
|
||||||
|
background-color: #fff;
|
||||||
|
border-top: 1px solid #c6cbd1;
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: #f6f8fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 恢复行内代码样式 */
|
||||||
|
code:not(pre code) {
|
||||||
|
padding: 0.2em 0.4em;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 85%;
|
||||||
|
background-color: rgba(27, 31, 35, 0.05);
|
||||||
|
border-radius: 3px;
|
||||||
|
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 恢复图片样式 */
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 恢复预格式化文本样式 */
|
||||||
|
pre {
|
||||||
|
padding: 16px;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 85%;
|
||||||
|
line-height: 1.45;
|
||||||
|
background-color: #f6f8fa;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
word-wrap: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -18,7 +18,31 @@
|
|||||||
</el-input>
|
</el-input>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-input type="textarea" v-model:model-value="content" placeholder="content" :autosize="{ minRows: 15 }" :disabled="disabled"/>
|
<el-row>
|
||||||
|
<el-col :span="16"></el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div
|
||||||
|
class="switch-button overflow-hidden z-10 border-0 border-gray-300 rounded-bl-sm rounded-tr-sm flex select-none">
|
||||||
|
<div class="switch-button-item" :class="{ 'switch-button-item-active': isEditing }"
|
||||||
|
@click="isEditing = true">
|
||||||
|
编辑
|
||||||
|
</div>
|
||||||
|
<div class="switch-button-item" :class="{ 'switch-button-item-active': !isEditing }"
|
||||||
|
@click="isEditing = false">
|
||||||
|
预览
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col>
|
||||||
|
<el-input v-if="isEditing" type="textarea" v-model:model-value="content" placeholder="content"
|
||||||
|
:autosize="{ minRows: 15 }" :disabled="disabled" />
|
||||||
|
<div class=" border-1 border-gray-300 rounded-sm p-2" v-else>
|
||||||
|
<markdown-render :data="content ?? ''" />
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -33,6 +57,8 @@ const summary = defineModel<string>('summary')
|
|||||||
const tags = defineModel<string[]>('tags')
|
const tags = defineModel<string[]>('tags')
|
||||||
const content = defineModel<string>('content')
|
const content = defineModel<string>('content')
|
||||||
|
|
||||||
|
const isEditing = ref(true)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -42,3 +68,30 @@ const content = defineModel<string>('content')
|
|||||||
gap: 5px;
|
gap: 5px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.switch-button {
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all .15s ease;
|
||||||
|
padding: 0 5px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-active {
|
||||||
|
color: #0077ff;
|
||||||
|
background-color: #d3e7ff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #c3e0ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+1
-1
@@ -11,7 +11,7 @@ export default class Html2VNode {
|
|||||||
public use(middleware: middlewareType) {
|
public use(middleware: middlewareType) {
|
||||||
this.middlewareList.push(middleware)
|
this.middlewareList.push(middleware)
|
||||||
}
|
}
|
||||||
public rander(htmlString: string) {
|
public render(htmlString: string) {
|
||||||
const html2ObjResult = this.html2Obj(htmlString);
|
const html2ObjResult = this.html2Obj(htmlString);
|
||||||
const middlewareMap = this.buildMiddlewareMap(html2ObjResult);
|
const middlewareMap = this.buildMiddlewareMap(html2ObjResult);
|
||||||
const wrinklesResult = this.wrinkles(html2ObjResult)
|
const wrinklesResult = this.wrinkles(html2ObjResult)
|
||||||
|
|||||||
Reference in new issue
Block a user