当前位置:网站首页>Milkdown control icon
Milkdown control icon
2022-07-07 13:27:00 【Cliven_】
Phenomenon description
stay vite + vue3 In the project , Use Milkdown As Markdown Edit box
Milkdown.vue
<template>
<VueEditor :editor="editor" />
</template>
<script setup> import {
Editor, rootCtx, defaultValueCtx } from "@milkdown/core"; import {
nord } from "@milkdown/theme-nord"; import {
VueEditor, useEditor } from "@milkdown/vue"; import {
commonmark } from "@milkdown/preset-commonmark"; import {
emoji } from "@milkdown/plugin-emoji"; import {
history } from '@milkdown/plugin-history'; import {
tooltip } from '@milkdown/plugin-tooltip'; import {
menu } from "@milkdown/plugin-menu"; const {
editor } = useEditor((root) => Editor.make() .config((ctx) => {
ctx.set(rootCtx, root); ctx.set(defaultValueCtx, "# Milkdown Vue"); }) .use(nord) .use(emoji) .use(commonmark) .use(history) .use(menu) .use(tooltip) ); </script>
The display effect is as shown in the figure
All icon areas become text , And crowded together very ugly , This is because milkdown/theme-nord
The theme uses google Provided Google material icons
from Milkdown Official example You can see
stay index.html
The document introduces Google Icon font library .
solve
Mode one Introduce... Online
The reason why there is no icon in our space is that there is no Google Icon font library causes , We can be as official , Directly in index.html
Add a line to the file CSS The reference of the file can .
index.html
<html>
<head>
...
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" />
...
</head>
...
</html>
This method will use Google Of CSS2 API Automatically reference and related fonts and configurations , There is a problem with this method when network conditions do not allow , It will cause the icon to still fail to load .
Mode two Offline import
according to Google material icons#setup_method_2_self_hosting Description in , We can download relevant font files , Then manually configure css Use font files .
For simplicity, I directly visited Google Of
Got it CSS Configuration file and font file .
CSS As shown below
/* fallback */
@font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v106/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}
.material-icons-outlined {
font-family: 'Material Icons Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
A font file also appears here
Here I also manually download and place the file in the project public/
Under the table of contents .
And then modified Milkdown.vue, Added the above CSS, And replaced the address of the font file with the local address , The modified file is as follows .
<template>
<VueEditor :editor="editor" />
</template>
<script setup> import {
Editor, rootCtx, defaultValueCtx } from "@milkdown/core"; import {
nord } from "@milkdown/theme-nord"; import {
VueEditor, useEditor } from "@milkdown/vue"; import {
commonmark } from "@milkdown/preset-commonmark"; import {
emoji } from "@milkdown/plugin-emoji"; import {
history } from '@milkdown/plugin-history'; import {
tooltip } from '@milkdown/plugin-tooltip'; import {
menu } from "@milkdown/plugin-menu"; const {
editor } = useEditor((root) => Editor.make() .config((ctx) => {
ctx.set(rootCtx, root); ctx.set(defaultValueCtx, "# Milkdown Vue"); }) .use(nord) .use(emoji) .use(commonmark) .use(history) .use(menu) .use(tooltip) ); </script>
<style> @font-face {
font-family: 'Material Icons Outlined'; font-style: normal; font-weight: 400; src: url(./gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2'); } .material-icons-outlined {
font-family: 'Material Icons Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } </style>
In addition to CSS And font, you can see that the icon on the control has been normal .
reference
[1]. milkdown . demo . https://milkdown.dev/online-demo
[2]. milkdown . Integrations vue. https://milkdown.dev/vue
[3]. google . fonts . Material Icons Guide . 2022.03 . https://developers.google.com/fonts/docs/material_icons
边栏推荐
- MATLAB中polarscatter函数使用
- Realbasicvsr test pictures and videos
- 数字ic设计——SPI
- How did Guotai Junan Securities open an account? Is it safe to open an account?
- Isprs2021/ remote sensing image cloud detection: a geographic information driven method and a new large-scale remote sensing cloud / snow detection data set
- 简单好用的代码规范
- 滑轨步进电机调试(全国海洋航行器大赛)(STM32主控)
- ORACLE进阶(五)SCHEMA解惑
- MySQL入门尝鲜
- 分布式事务解决方案
猜你喜欢
DHCP 动态主机设置协议 分析
Practical example of propeller easydl: automatic scratch recognition of industrial parts
迅为iTOP-IMX6ULL开发板Pinctrl和GPIO子系统实验-修改设备树文件
Cinnamon Applet 入门
How far can it go to adopt a cow by selling the concept to the market?
Introduce six open source protocols in detail (instructions for programmers)
存储过程的介绍与基本使用
[untitled]
LED light of single chip microcomputer learning notes
Japanese government and enterprise employees got drunk and lost 460000 information USB flash drives. They publicly apologized and disclosed password rules
随机推荐
regular expression
LIS 最长上升子序列问题(动态规划、贪心+二分)
MongoDB 遇见 spark(进行整合)
Go language learning notes - structure
ESP32 ① 编译环境
分布式事务解决方案
JNA learning notes 1: Concepts
How did Guotai Junan Securities open an account? Is it safe to open an account?
Mongodb command summary
Why can basic data types call methods in JS
Unity build error: the name "editorutility" does not exist in the current context
PCAP学习笔记二:pcap4j源码笔记
[QNX hypervisor 2.2 user manual]6.3.4 virtual register (guest_shm.h)
Read PG in data warehouse in one article_ stat
DHCP 动态主机设置协议 分析
1. Deep copy 2. Call apply bind 3. For of in differences
QQ medicine, Tencent ticket
一文读懂数仓中的pg_stat
LED light of single chip microcomputer learning notes
RealBasicVSR测试图片、视频