wysiwyg.css变量自定义教程：打造专属你的Markdown样式

wysiwyg.css变量自定义教程：打造专属你的Markdown样式

【免费下载链接】wysiwyg.cssA tiny CSS for generated HTML or Markdown content项目地址: https://gitcode.com/gh_mirrors/wy/wysiwyg.css

wysiwyg.css是一款轻量级CSS工具，专为生成HTML或Markdown内容设计，让你轻松美化文档显示效果。通过自定义变量，即使是新手也能快速打造符合个人风格的Markdown样式。

为什么选择wysiwyg.css变量自定义？

wysiwyg.css提供了丰富的可定制变量，让你无需深入CSS知识就能：

• 调整颜色方案匹配品牌风格
• 修改字体大小和行高提升阅读体验
• 自定义表格、列表等元素样式
• 启用或禁用特定功能如字体平滑、链接下划线

快速开始：获取wysiwyg.css

首先，克隆项目仓库到本地：

git clone https://gitcode.com/gh_mirrors/wy/wysiwyg.css

核心文件结构：

• 主样式文件：wysiwyg.sass
• 默认主题配置：themes/default.sass
• 文档示例：docs/index.html

基础变量自定义：颜色方案

打开wysiwyg.sass文件，你会看到丰富的颜色变量定义：

// 主要颜色 $blue: #2478ff !default $pink: #ff2450 !default $purple: #9524ff !default // 文本颜色 $text: $grey !default $text-code: $pink !default $text-strong: $grey-dark !default

修改示例：将链接颜色改为绿色

$blue: #32a852 !default // 自定义链接颜色 $link: $blue !default // 应用到链接

排版优化：字体与间距调整

通过调整以下变量改善阅读体验：

// 字体设置 $family-wysiwyg: "Segoe UI", "Roboto", sans-serif !default $line-height: 1.6 !default $margin: 1.4em !default // 标题设置 $weight-headings: 700 !default

实用技巧：对于中文文档，建议添加中文字体：

$family-wysiwyg: "Microsoft YaHei", "Segoe UI", sans-serif !default

功能开关：启用/禁用特性

themes/default.sass文件提供了便捷的功能开关：

// 功能选项 $closer-lists: true // 紧凑列表样式 $custom-colors: true // 启用自定义颜色 $custom-fonts: true // 启用自定义字体 $font-smoothing: true // 字体平滑 $heading-borders: true // 标题底部边框 $visited-links: true // 已访问链接样式

只需将对应的值改为false即可禁用特定功能。

表格样式定制：提升数据可读性

通过以下变量美化表格显示：

$table-hover: true !default // 行悬停效果 $table-striped: true !default // 条纹行背景 $table-background-even: #f8f8f8 !default // 偶数行背景

启用后，表格将自动显示交替行背景色，提升数据阅读体验。

应用自定义主题

修改完成后，你可以通过Sass编译器将.sass文件编译为CSS：

sass wysiwyg.sass custom-wysiwyg.css

然后在HTML中引用生成的CSS文件：

<link rel="stylesheet" href="custom-wysiwyg.css">

常见问题解答

Q: 修改变量后没有生效？
A: 确保变量定义在!default之前，或移除!default关键字强制覆盖默认值。

Q: 如何创建多个主题？
A: 可以复制themes/default.sass创建新主题文件，然后在编译时指定不同主题。

通过自定义wysiwyg.css变量，你可以轻松打造独特的Markdown文档样式，让内容展示更加专业和个性化。开始尝试吧！

【免费下载链接】wysiwyg.cssA tiny CSS for generated HTML or Markdown content项目地址: https://gitcode.com/gh_mirrors/wy/wysiwyg.css