标签在markdown中通常失效，因github、typora默认模式、vs code预览等解析器主动过滤该“危险标签”；可靠方案是用class配合外部css注入。
Markdown 本身不支持直接写 <style></style> 标签生效——绝大多数解析器（如 GitHub、Typora 默认模式、VS Code 预览插件）会过滤或忽略内联 <style></style>，哪怕你写了也看不到效果。
为什么 <style></style> 在 Markdown 预览里经常失效
Markdown 解析器（如 marked、remark、CommonMark 实现）默认只处理有限 HTML 子集，<style></style> 属于“危险标签”，多数会直接剥离。GitHub Flavored Markdown 明确不渲染 <style></style>；Typora 需手动开启「允许 HTML」且仅在编辑态部分生效；VS Code 的官方预览根本不执行任何 CSS。
- 不是语法写错了，是解析器主动丢弃
- 即使渲染出来，CSS 作用域也常被预览容器的 shadow DOM 或 iframe 隔离
-
<style></style>放在文档开头/结尾都无效，位置不改变结果
哪些场景下 <style></style> 可能“看起来”生效
仅限于：你用的是支持完整 HTML 渲染的定制环境，比如自己写的 Electron 应用、用 marked 配置了 sanitize: false + smartLists: true 的网页，或 Typora 开启了「文件 → 选项 → 外观 → 启用 HTML」并配合自定义主题 CSS。
输入文章 URL，返回干净 Markdown。支持17个平台（头条、微信公众号、知乎、36kr、虎嗅、华尔街见闻、澎湃、InfoQ 等）专项优化，双引擎提取、图片本地化、三层抓取策略。常与 browser‑web‑search skill配合：先用 bws 搜索获取 url 列表，再逐篇调用本 skill 提取正文。
- Typora 中启用 HTML 后，
<style>.red { color: red; }</style>+<p class="red">test</p>才可能显示红色 - VS Code 需安装插件如
Markdown Preview Enhanced，它用本地服务渲染，才支持内联<style></style> - Obsidian 通过社区插件
Custom CSS管理样式，但也不走内联<style></style>路径
真正可靠的替代方案：用 class + 外部 CSS 注入
与其赌解析器是否放行 <style></style>，不如把样式逻辑交给宿主环境控制。核心思路是：Markdown 写 class，外部注入 CSS 规则。
- 在 Markdown 里写：
<div class="highlight-box">注意这里</div> - 在 Typora 中：设置 → 外观 → 打开样式文件夹 → 编辑
base.user.css，加入.highlight-box { background: #fffbcc; padding: 8px; border-left: 4px solid #f9a825; } - 在 Obsidian 中：设置 → 外观 → CSS 代码片段 → 新建
custom-highlight.css，粘贴同上规则 - 在网页项目中：用
marked渲染后，把 CSS 通过<link>或document.styleSheets注入到渲染容器的父级
内联 <style></style> 是个幻觉式方案——它只在极少数调试场景下“偶然”起效，一旦换环境或升级解析器版本就断掉。真要稳定控制样式，必须把 class 当契约，把 CSS 放到解析器无法绕过的加载链路里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
