文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法

简介: 文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法

官方文档:

用于 Vue React | wangEditor

视频资源:

wangEditor5教程06-展示HTML无样式怎么办_哔哩哔哩_bilibili

wangEditor5教程07-上传图片_哔哩哔哩_bilibili

利用这种格式可以同时获取数据

自定义样式

他是怎样来的

Ctrl + U,看Css文件

自定义CSS样式也可以,参考文件去看就行

点击Demo去看一下

Ctrl + U可以看源码,看CSS文件

引入JS文件

直接参考源代码的高亮

自己修改代码的样式设计方法是:按F12

复制这里的样

然后将标题的样式全部改成div

<template>
  <div v-html="article.content" style="margin: -90px 0 0 0;"></div>
</template>
 
<script>
import axios from 'axios';
export default {
    data(){
        return {
            article: [],
            id: 10
        }
    },
    mounted(){
        axios.get('/news/selectById/' + this.id).then(res => {
        this.article = res.data.data
      })
      console.log(this.article)
    }
}
</script>
 
<style>
  
  div {
    word-wrap: normal;
    font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
    -webkit-hyphens: none;
    hyphens: none;
    line-height: 1.5;
    margin: .5em 0;
    overflow: auto;
    padding: 1em;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    text-align: left;
    text-shadow: 0 1px #fff;
    white-space: pre;
    word-break: normal;
    word-spacing: normal;
}
 
div {
    background-color: var(--w-e-textarea-slight-bg-color);
    border: 1px solid var(--w-e-textarea-slight-border-color);
    border-radius: 4px 4px;
    display: block;
    font-size: 14px;
    padding: 10px;
    text-indent: 0;
}
div {
    background-color: var(--w-e-textarea-slight-bg-color);
    border-radius: 3px;
    font-family: monospace;
    padding: 3px;
}
</style>

代码块样式设计最终成形样子:

目录
打赏
0
3
4
0
42
分享
相关文章
Css实现文本超出长度隐藏并用三个点结尾
Css实现文本超出长度隐藏并用三个点结尾
41 17
|
3月前
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
24 0
CSS3几何透明层文本悬停变色源码
创建HTML文件
【10月更文挑战第14天】创建HTML文件
95 4
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
323 2
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
424 0
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
52 1
JavaScript中的原型 保姆级文章一文搞懂

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等