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 {
|
||||
setup: () => {
|
||||
return () => res
|
||||
@@ -92,11 +92,167 @@ const VNodeArr = computed(() => {
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin: 1em 0;
|
||||
padding-top: 1em;
|
||||
unicode-bidi: isolate;
|
||||
overflow: hidden;
|
||||
border-style: inset;
|
||||
border-width: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 恢复标题样式 */
|
||||
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>
|
||||
@@ -18,7 +18,31 @@
|
||||
</el-input>
|
||||
</el-col>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@@ -33,6 +57,8 @@ const summary = defineModel<string>('summary')
|
||||
const tags = defineModel<string[]>('tags')
|
||||
const content = defineModel<string>('content')
|
||||
|
||||
const isEditing = ref(true)
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -42,3 +68,30 @@ const content = defineModel<string>('content')
|
||||
gap: 5px;
|
||||
}
|
||||
</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) {
|
||||
this.middlewareList.push(middleware)
|
||||
}
|
||||
public rander(htmlString: string) {
|
||||
public render(htmlString: string) {
|
||||
const html2ObjResult = this.html2Obj(htmlString);
|
||||
const middlewareMap = this.buildMiddlewareMap(html2ObjResult);
|
||||
const wrinklesResult = this.wrinkles(html2ObjResult)
|
||||
|
||||
Reference in new issue
Block a user