-
VSCode Lite Edit 主题 Callout 迁移方法
2025-12-21 10:25 -
VSCode Lite Edit 主题 Callout 迁移方法
2025-12-20 23:42大佬 ,有个问题可以帮忙看下吗
在 VSCode Lite Edit 主题下使用 Query View 插件 ,嵌入块的时候里面的内容基本是偏左的 ,但是在默认主题下是能够显示正常的 ,可以帮忙看下吗
VSCode Lite Edit 主题下效果

好多嵌入块都是这样的
默认主题下效果:

图中 Query View 代码如下:
//!js const query = async () => { let dv = Query.DataView(protyle, item, top); const SQL = ` SELECT SUBSTR(created, 1, 6) AS month, COUNT(*) AS count FROM blocks WHERE type = 'd' GROUP BY SUBSTR(created, 1, 6) ORDER BY month; `; let blocks = await Query.sql(SQL); dv.addeline(blocks.pick('month'), blocks.pick('count'), { title: 'Monthly Created Documents', xlabel: 'Month', ylabel: 'Count' }); dv.render(); } return query(); -
求个引述块样式
2025-08-03 13:58
/* 极致优化的引述块样式 */ .b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq { position: relative; margin: 8px 0; /* 紧凑的上下外边距 */ padding: 7px 12px; /* 更加紧凑但舒适的内边距 */ border-left: 5px solid #64b5f6; /* 温柔而鲜明的蓝色边框 */ background: linear-gradient(135deg, rgba(100, 181, 246, 0.05) 0%, rgba(100, 181, 246, 0.02) 100%); /* 柔和的渐变背景 */ border-radius: 6px; /* 圆润的边角 */ color: var(--b3-theme-on-surface-lighter); /* 使用主题变量定义文字颜色 */ font-size: 1em; /* 标准字体大小 */ line-height: 1.6; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.03); transition: all 0.2s ease-in-out; } /* 悬停时的变化 */ .b3-typography blockquote:hover, .protyle-wysiwyg blockquote:hover { background: linear-gradient(135deg, rgba(100, 181, 246, 0.1) 0%, rgba(100, 181, 246, 0.05) 100%); border-left-color: #3d85c6; /* 边框颜色加深 */ } /* 添加一个小装饰元素(可选) */ .b3-typography blockquote::after, .protyle-wysiwyg blockquote::after { content: "“"; /* 引号装饰 */ position: absolute; bottom: 5px; right: 10px; font-size: 2em; opacity: 0.3; color: inherit; } /* 移除所有默认 ::before 伪元素干扰 */ .b3-typography blockquote::before, .b3-typography .bq::before, .protyle-wysiwyg blockquote::before, .protyle-wysiwyg .bq::before { display: none; } /* 深色模式适配 */ @media (prefers-color-scheme: dark) { .b3-typography blockquote, .protyle-wysiwyg blockquote { background: linear-gradient(135deg, rgba(100, 181, 246, 0.15) 0%, rgba(100, 181, 246, 0.1) 100%); border-left-color: #90caf9; /* 浅蓝灰 */ color: #e0f5fe; box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.03); } .b3-typography blockquote:hover, .protyle-wysiwyg blockquote:hover { background: linear-gradient(135deg, rgba(100, 181, 246, 0.2) 0%, rgba(100, 181, 246, 0.15) 100%); border-left-color: #bbdefb; } } -
求个引述块样式
2025-08-03 13:54
/* 紧凑且优雅的引述块样式 */ .b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq { position: relative; margin: 8px 0; /* 减少上下外边距 */ padding: 6px 10px; /* 更紧凑的内边距 */ padding-left: 12px; /* 稍微增加左侧内边距,但保持紧凑 */ border-left: 4px solid #5e97b0; /* 柔和的蓝色边框 */ background-color: rgba(94, 151, 176, 0.05); /* 温柔背景色 */ border-radius: 4px; /* 小圆角处理 */ color: var(--b3-theme-on-surface-lighter); /* 使用主题变量定义文字颜色 */ font-size: 0.98em; /* 文字大小略微缩小 */ line-height: 1.5; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05); transition: all 0.2s ease-in-out; } /* 悬停时的变化 */ .b3-typography blockquote:hover, .protyle-wysiwyg blockquote:hover { background-color: rgba(94, 151, 176, 0.1); border-left-color: #4a7d9a; /* 边框颜色加深 */ } /* 移除所有默认 ::before 伪元素干扰 */ .b3-typography blockquote::before, .b3-typography .bq::before, .protyle-wysiwyg blockquote::before, .protyle-wysiwyg .bq::before { display: none; } /* 深色模式适配 */ @media (prefers-color-scheme: dark) { .b3-typography blockquote, .protyle-wysiwyg blockquote { background-color: rgba(94, 151, 176, 0.15); border-left-color: #7ab8db; /* 浅蓝灰 */ color: #d3eaf2; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(255, 255, 255, 0.05); } .b3-typography blockquote:hover, .protyle-wysiwyg blockquote:hover { background-color: rgba(94, 151, 176, 0.2); border-left-color: #9bd0ea; } } -
求个引述块样式
2025-08-03 13:52
/* 精美引述块样式 - 非斜体 + 莫兰迪蓝灰系 + 紧凑高度 */ .b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq { position: relative; margin: 10px 0; padding: 8px 14px; /* 紧凑高度 */ border-left: 0.35em solid #607d8b; /* 莫兰迪灰蓝色 #607d8b (Material Blue Grey 500) */ background-color: rgba(96, 125, 139, 0.06); /* 柔和灰蓝背景 */ border-radius: 0 6px 6px 0; color: var(--b3-theme-on-surface); /* 主题文字色,清晰可读 */ font-style: normal; /* 正文不斜体 */ font-size: 0.96em; line-height: 1.5; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: background-color 0.2s ease, border-left-color 0.2s ease; } /* 悬停效果:边框变暖一点,背景稍亮 */ .b3-typography blockquote:hover, .protyle-wysiwyg blockquote:hover { background-color: rgba(60, 100, 120, 0.09); border-left-color: #546e7a; /* 加深一点的蓝灰 */ } /* 移除所有默认 ::before 伪元素干扰 */ .b3-typography blockquote::before, .b3-typography .bq::before, .protyle-wysiwyg blockquote::before, .protyle-wysiwyg .bq::before { display: none; } /* 深色模式适配 */ @media (prefers-color-scheme: dark) { .b3-typography blockquote, .protyle-wysiwyg blockquote { background-color: rgba(96, 125, 139, 0.12); border-left-color: #78909c; /* 浅蓝灰 */ color: #e8f0f2; border-top-color: rgba(255, 255, 255, 0.08); border-bottom-color: rgba(255, 255, 255, 0.08); } .b3-typography blockquote:hover, .protyle-wysiwyg blockquote:hover { background-color: rgba(96, 125, 139, 0.18); border-left-color: #90a4ae; } }




就像这样子




