Vue中使用editor.md（3）：使用typo.css进行排版

最新推荐文章于 2024-06-01 15:46:07 发布
最新推荐文章于 2024-06-01 15:46:07 发布
阅读量136 收藏
点赞数
分类专栏： 前端 文章标签： vue.js css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ice_bear221/article/details/131183176
版权

0. 背景

使用typo.css对editor.md生成的html元素进行排版

1. 使用typo.css

1.1 下载

下载地址：https://github.com/sofish/typo.css

在这里插入图片描述

1.2 使用

在这里插入图片描述
项目解压到public/static/下

main.js引入css

import '@/../public/static/typo.css-master/typo.css'

在需要排版的标签添加typo类

      <!--html信息-->
      <div class="typo blog-html" v-html="blog.html"></div>

2. 测试

在这里插入图片描述

x. 参考

  1. https://typo.sofi.sh/
ice_bear221
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue论坛网站的文章自动排版_基于 VuePress 定制个人博客网站
weixin_39719042的博客
11-25 801
VuePress简单来说，VuePress 是 Vue 驱动的静态网站生成器。VuePress 简单易上手，同时也有足够强大的定制能力，尤其对熟悉 Vue 的前端开发人员而言。相比于知名的博客生成器 Hexo 来说，VuePress 最大优势就是 Vue 带来的灵活性。在 VuePress 0.x 时，VuePress 还只能算是个生成文档的不错的工具，主题样式比较固定，功能也不是足够强大。随后，...
基于VUE的markdown文本编辑器
08-10
基于VUE的markdown文本编辑器
vue-editor.md.zip
12-29
vue整合editor.md示例，解决多个editor.md同时共存问题，v-model 绑定使用非常方便，js预加载
vue-editor-js:Vue用户的editor.js
05-09
vue编辑器js vue-editor-js是editorjs包装器组件。 请先查看此内容。 适用于2.0.0之前版本的用户。 该插件是editor.js的包装器组件。 如果您需要将插件用于editor.js，则将其导入并设置config属性。 请参阅 适用于1.0.0之前版本的用户。 请在main.js中使用Vue.use vue-editor-js。 支持的插件 关联 定界符 生的 桌子 警告 段落 检查清单 安装 # NPM npm install --save vue-editor-js # or Yarn yarn add vue-editor-js 用法 在main.js中 // ... import Editor from 'vue-editor-js' Vue . use ( Editor ) // ... 在Nuxt.js中 // in nuxt.co
editor.md中使用的github emoji 表情图片
12-20
editor.md中使用的github emoji 离线表情包图片，用于解决无法加载的问题
vue 文本超过2行展示更多：列表做法、单个文本做法
m0_58397123的博客
04-02 142
i++) {this.$set(i,} else {this.$set(i,},},},单个div 里面超出2行显示更多。
Java springboot+vue生成报纸排版页面的新闻官网
琅枫的博客
05-25 994
以下是一个简单的示例代码，演示如何使用Java Spring Boot和Vue.js来创建RESTful API并处理API请求。总之，以上只是可选的一些步骤，您可以根据具体需求进行适当更改和优化。在开发过程中，记得遵守相关法律法规，保护用户隐私和站点安全。使用axios或fetch库进行API调用，处理获取到的数据并在前端展示。2.配置数据库连接信息和MyBatis Plus代码生成器。在命令行中输入以下命令以依赖包安装相应插件。4.实现Controller层逻辑。以上只是一个简单的示例代码。
my-vue-typoraCSS：一个自己定制的根据typora Vue主题改造来CSS主题
02-18
一款根据Vue主题修改而来的typora主题， 湛蓝的主题，爱了！ 安装方法 将my-vue的文件夹与文件复制在typora的主题文件夹下即可， 注意，自定义名称一定要保证文件夹与CSS同名，且为小写使用-连接 主题预览如下，
vue论坛网站的文章自动排版_【Vue原理】Vue源码阅读总结大会 - 终
weixin_39687468的博客
12-13 372
写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】Vue源码阅读总结大会 - 终 终于啊终于啊，把 Vue 系列的文章发完了了，如释重负的感jio啊，今天就打算总结下，我这...
Vue中文字不规则排列
qq_42006353的博客
11-30 1301
预览     templete &lt;ul class="content"&gt; &lt;li :style="{ color: activeColor(), fontSize: fontSize() + 'px',top:top()+'px'}"&gt;灯光&lt;/li&gt; &lt;li :style="{ col...
中文网页重设与排版typo.css.zip
07-18
中文网页重设与排版： 目标：一致化浏览器排版效果，构建最适合中文阅读的网页排版。包括桌面和移动平台。 Alpha 中，各路牛人都来支持一下，加入开发啊！ 预览：typo.css 一、目录结构 . ├── README.md --- 使用帮助 ├── TODO.md --- TODO-List ├── license.txt --- 许可证 ├── typo.css --- 将应用于你的项目 └── typo.html --- Demo/预览 二、TYPO.CSS 的设计和使用 建议看源代码，特别是注释，需要认真看。typo.css 主要包括： 1、一般 reset.css 所需的内容 目前的设计是这样的，尽量保持完整的 reset，比如让 ul/ol 无样式并且无多余的 padding/margin， 这是必须的，因为一个网可能需要很多自定义的的内容，在实践中我们并不希望像 ul/ol 有样式，这样我们得用优先级去覆盖，这是非常麻烦的事。所以 typo.css 并不像 normalize.css，后者给每一个元素都预先定义了样式，这样在自定义的时候将是非常痛苦的。要大保持干净的所有元素一致化的 reset 才是最佳实践。 为什么不是 Han 这个项目？ 2、class="typo" 阅读内容排版 在文章/文档阅读的页面，需添加 .typo 这个 class，这样 table/ol/ul 等都会有预定的样式，让你的排版像 http://typo.sofish.de 一样，让用户阅读起来更舒服。 3、增加类： 主要是一些需要中文日常排版需要的元素和语文对应样式的增强，目前包括： (1) 专名号：使用标签 或者 .typo-u (2) 着重号：使用 class .typo-em (3) 首字下沉：使用 class .typo-first (4) 清理浮动：与一般 reset.css 保持一致 .clearfix 三、开源许可 Sofish Lin: founder, creator of Alice CSS, a code writter, a semi-designer. Hotoo: developer, VIM guru, front-end web developer @ alipay.com 基于 MIT License 开源，使用代码只需说明来源，或者引用 license.txt 即可。 标签：typocss
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
vue2-editor：使用Vue.js和Quill的文本编辑器
02-06
由Quill.js和Vue.js支持的易于使用但功能强大且可自定义的RTF编辑器 安装 您可以使用Yarn或NPM npm install vue2-editor 要么 yarn add vue2-editor 用法 // Basic Use - Covers most scenarios import { ...
vue3之H5实现树形结构排版
kjhytfh的博客
08-18 642
最近接到一个需求：要求实现一个树形结构模板，且层级不确定，有多有少，使用vant组件库也没有现成组件，诶！还是自己手动实现一个吧。提示：以下是本篇文章正文内容，下面案例可供参考简单的一个树状结构就实现了，具体真正的的数据结构是什么样子的可自行处理数据再去渲染。
Java+vue生成报纸排版新闻页面
琅枫的博客
05-25 1123
请注意，上述示例只是为了说明一个可能的实现方法，并且缺少许多必要的代码和细节。在实际开发中，您需要根据具体需求进行更多的自定义和优化，以确保系统的完整性、稳定性和安全性。需要注意的是，在开发过程中保证安全性和稳定性，并严格遵守相关法律法规。
vue使用v-print-nb插件实现A4纸张排版打印
weixin_39293537的博客
05-27 4976
1、安装v-print-nb插件 npm install vue-print-nb --save 2、数据加载 /*打印预览*/ printPdf(mergeEbeln) { this.signal = false; this.dylist = []; getPrintList({mergeEbeln:mergeEbeln}).then(response => { /*分页*/ if (response.data
HTML Typo.css 中文网页重设与排版
一直专注于互联网
09-14 1670
typo.css @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ html { color: #333; background: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-rendering: ...
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 650
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
vue3 vue-draggable-next 实现拖拽穿梭框效果
最新发布
游九尘的博客
06-01 378
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
vue3 editor.md
01-03
Vue3 Editor.md是一个基于Vue3的富文本编辑器组件，它可以方便地实现多个Editor.md同时共存的功能，并且支持使用v-model进行双向数据绑定。...安装完成后，你就可以在Vue3项目中使用Editor.md组件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值