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

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

相关文章
简约的域名主页HTML源码带暗黑模式
简约的域名主页HTML源码带暗黑模式
490 17
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
822 77
可爱狗狗的404动画HTML源码
可爱狗狗的404动画HTML源码
591 17
可爱狗狗的404动画HTML源码
简约404错误页面HTML源码
简约404错误页面HTML源码
551 12
HTML单页在线自适应拟态影院源码
HTML单页在线自适应拟态影院源码
408 25
|
存储 API 文件存储
单页图床HTML源码+本地API接口图床系统源码
图床系统是一种用于存储和管理图片文件的在线服务。它允许用户上传图片文件,并生成相应的图片链接,从而方便用户在网页、社交媒体或其他平台上分享图片。
767 2
单页图床HTML源码+本地API接口图床系统源码
|
移动开发 前端开发 JavaScript
HTML5实现好看的博客网站模板源码
HTML5实现的精美博客网站模板,适用于个人博客、简历等多种场景。代码简洁规范,页面干净整洁,内置首页、列表、文章等通用模板,支持多种风格切换,兼容性强,易于扩展和修改,附带完整注释,适合初学者上手。提供源码下载及在线预览,方便直接使用或二次开发。
1121 1
HTML5实现好看的博客网站模板源码
随机二次元背景毛玻璃个人导航HTML源码
随机二次元背景毛玻璃个人导航HTML源码
1429 19
|
移动开发 前端开发 JavaScript
HTML5实现好看的劳动节网页源码
HTML5实现好看的劳动节网页源码,劳动节网页,劳动节网页源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、劳动节介绍、劳动节由来、劳动节习俗、劳动节文化、劳动节活动、劳动节故事、劳动节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
846 4