文本,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>

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

相关文章
|
27天前
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
186 77
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
21天前
可爱狗狗的404动画HTML源码
可爱狗狗的404动画HTML源码
104 17
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
10天前
|
前端开发
Css实现文本超出长度隐藏并用三个点结尾
Css实现文本超出长度隐藏并用三个点结尾
37 17
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
28天前
html5+svg太空人404动画模板源码
html5+svg太空人404动画模板源码
43 17
|
26天前
创意滑板动画404错误提示HTML源码
创意滑板动画404错误提示页面HTML源码
18 0
创意滑板动画404错误提示HTML源码
|
JavaScript 前端开发
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
50 1
JavaScript中的原型 保姆级文章一文搞懂

热门文章

最新文章