Git Product home page Git Product logo

mweb-themes's Introduction

MWeb-Themes

30+ 款 Markdown 预览主题,包括 Typo.cssVueBearLark 等风格,适用于 MWeb、Typora 等笔记软件。

在线预览所有主题

目录

主题列表

浅色主题

ayu
bear-default
contrast
d-boring
default
duotone-heat
duotone-light
gandalf
indigo
jzman
lark
olive-dunk
red-graphite
smartblue
solarized-light
typo
v-green
vue

深色主题

ayu-mirage
charcoal
cobalt
dark-graphite
dieci
dracula
gotham
lighthouse
nord
panic
solarized-dark
toothpaste

部分主题预览

Bear 同款主题

灵感来自 Bear 的主题,共 22 款

默认配置:字号 16px、页宽 46rem。如果希望和 Bear 完全一致(字号 14px、页宽 40em),请自行更改 bear-default.scss 中的相关变量并重新编译。

Typo

基于 Typo.css 修改:

Vue

基于 typora-vue-theme 修改:

Indigo

基于 MDTU 修改:

Lark

灵感来自 飞书文档

使用主题

在 MWeb 中使用

MWeb 3.x:

  1. 下载 release 页面最新的主题压缩包 mweb3-themes.zip
  2. 打开 MWeb 偏好设置 - 预览样式 - 编辑 - 打开自定义样式所在的文件夹...(文件夹名为 PreviewCSS
  3. 将解压后的主题文件(.css 文件)拖到文件夹里
  4. 点击 MWeb 偏好设置 - 预览样式 - 刷新,可以看到所有主题列表
  5. 选择喜欢的主题

MWeb 4.0.x:

  1. 下载 release 页面最新的主题压缩包 mweb3-themes.zip
  2. 解压,得到一系列名为 mweb-xxx.css 的文件
  3. 打开 MWeb 偏好设置 - 自定义主题 - 新增亮主题 (如果是深色主题,应该选择“新增暗主题”)
  4. 主题名称命名为 mweb-xxx
  5. 出现一个主题编辑器,将右侧“按编辑器主题自动生成预览 CSS”取消勾选,然后将 mweb-xxx.css 文件的内容拷贝到右侧文本输入框中
  6. 点击“保存”,随后就可以在偏好设置中切换亮/暗主题了

MWeb 4.2.x (Mweb Pro):

  1. 下载与解压 mweb4-themes.zip
  2. 打开 MWeb 偏好设置 - 主题&样式 - 自定义主题 - 导入亮主题 (如果是深色主题,应该选择“导入暗主题”)
  3. 选中第一步解压后得到的全部的 mweb-xxx.mwebtheme 文件,导入即可
  4. 每个主题文件,均包含编辑器主题预览主题

Q: MWeb Pro 如何快速删除多个导入的主题文件?
A: 删除 ~/Library/Containers/com.coderforart.MWeb3/Data/Library/Application\ Support/themes 中的文件夹即可。删除后需要重启 MWeb。

在 Typora 中使用

  1. 下载 release 页面最新的主题压缩包 typora-themes.zip
  2. 打开 Typora 偏好设置 - 外观 - 打开主题文件夹
  3. 将解压后的主题文件(.css 文件)拖到文件夹里
  4. 重启 Typora
  5. 点击菜单栏 - 主题,可以看到所有主题列表
  6. 选择喜欢的主题

开发主题

本项目提供了一个标准样式模板,可以通过设置变量(颜色、字号等)的方式快速开发一个新的预览主题

请查看开发文档

mweb-themes's People

Contributors

dependabot[bot] avatar imageslr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

mweb-themes's Issues

indigo主题的代码块左侧有一条竖线

很喜欢这个主题,但是突然发现这个主题下的代码块左侧有一条竖线,并且没有对齐,如图所示。
QQ图片20220908145537
这个主题源自markdown-theme中的山月主题,我尝试自己修改了一下没有成功,希望能修一下。

以 mweb-indigo 主题样式导出的 PDF 文件中 footnote 不能正常跳转

问题说明:

  1. 目前只发现 indigo 主题有此问题,因为一直在用,并未测试其他自定义主题是否也存在该问题
  2. 测试了几款其他自定义主题,没有发现存在该问题
  3. indigo 主题下,Markdown 预览,导出 HTML 等均不存在跳转问题,在导出时选择“默认样式”也不存在问题,只有以“当前样式”(indigo 主题样式)导出 PDF 存在问题
  4. 虽然问题复现与测试文本无关,但可使用下面的文本测试

测试文本:

# 测试文本

Et quaerat iste et eaque recusandae sed soluta[^1] sapiente et numquam provident eos corporis vero qui fugit ipsa eum doloremque eaque. Aut numquam sequi vel laboriosam molestiae et tempore consequatur 33 quas magni aut tenetur aperiam aut adipisci placeat et veritatis exercitationem. Ea perspiciatis quis At enim suscipit sed rerum autem non illo minus in adipisci voluptatem sed iure doloremque?

Ea obcaecati quisquam sit iusto vitae[^2] eum galisum harum et dolor consequatur. Est voluptatum voluptatum qui quia aliquam ab modi quisquam eum tempora eaque ut incidunt praesentium aut internos galisum qui impedit minima.

At neque esse ut numquam eligendi aut consectetur veniam nam temporibus nemo aut eligendi molestiae? Et quis praesentium aut consequatur dolor et explicabo deserunt non modi neque id inventore perferendis. Aut incidunt distinctio et mollitia neque est internos tenetur ea consequatur nihil Quis officia. Est rerum enim aut accusamus fugiat aut molestiae officia non quam voluptatibus sit accusantium fugit.

Et earum dolore nam numquam totam vel praesentium Quis est labore dolores ut aliquid incidunt. At earum impedit ut sequi ducimus id mollitia rerum ut neque dolor. Qui nobis molestiae ut possimus asperiores 33 veritatis voluptatem vel accusamus necessitatibus et magnam rerum in amet porro. Est voluptatem consequuntur ut ipsa iusto aut autem nesciunt est commodi optio est sint dolore ex soluta temporibus qui rerum cumque.

Et voluptatem ipsam eum accusantium culpa ut omnis omnis est voluptas recusandae ut maiores non nobis voluptas? Qui officiis commodi qui pariatur labore ut velit unde ut voluptatem ipsum et nihil perspiciatis. Et facere quod eum dolorem fugiat vel fugiat beatae ex maxime suscipit.

[^1]: this is footnote 1
[^2]: this is footnote 2

导出样式选择

(无 bug)默认样式:
image
(有 bug)使用当前预览样式(indigo 样式):
image

太棒了

太棒了,一个小小的star 略表敬意.感谢

同学,您这个项目引入了484个开源组件,存在4个漏洞,辛苦升级一下

检测到 imageslr/mweb-themes 一共引入了484个开源组件,存在4个漏洞

漏洞标题:Socketio Engineio 资源管理错误漏洞
缺陷组件:[email protected]
漏洞编号:CVE-2020-36048
漏洞描述:Socketio Engineio是Socketio社区的一个基于Javascript用于浏览器与设备进行双向通信的实时引擎。
Socketio Engine.IO before 4.0.0 存在安全漏洞,攻击者可利用该漏洞通过对长轮询传输的POST请求导致拒绝服务(资源消耗)。
影响范围:(∞, 4.0.0)
最小修复版本:4.0.0
缺陷组件引入路径:[email protected]>[email protected]>[email protected]

另外还有4个漏洞,详细报告:https://mofeisec.com/jr?p=id1f1b

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.