自定义修改Typora原生默认github风格样式

这篇具有很好参考价值的文章主要介绍了自定义修改Typora原生默认github风格样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用typora的时候,想要自定义一些颜色、字体,或者修改一些设置,这个时候需要修改或者自己编写css文件。

修改涉及的样式:

① 目录

② 块应用

我还是比较喜欢原生自带的默认样式(github样式),

  • 但是这个侧边栏大纲目录字体太大,不直观清晰。
  • 还有“块引用”也不明显直观。

所以参考着“drake样式”(https://theme.typora.io/theme/Drake),修改了一下。

注意:https://theme.typora.io/theme/Drake网站中的比较旧,建议点进“homepage”中去取得最新版本的css。自定义修改Typora原生默认github风格样式

步骤:

1. 文件 →从菜单栏 偏好设置,打开偏好设置,然后点击 "打开主题文件夹"。复制备份一下“github.css”为“github.css.bak”(改错了还能还原)。

2. 修改“github.css”文件,添加如下代码:

最开始位置的root中添加:

:root {
	/*↓↓↓ my theme ↓↓↓*/
	--text-color: #304455;
	--drake-accent: #31a062;
	--a-color: var(--drake-accent);
	--outline-active-color: var(--a-color);
	--blockquote-border-color: #f66;
    --blockquote-color: var(--text-color);
    --blockquote-bg-color: #fdefee;
	/*↑↑↑ my theme ↑↑↑*/

	/*这两个是自带的样式*/
    --side-bar-bg-color: #fafafa;
    --control-text-color: #777;
    /*这两个是自带的样式*/
}

 最后结束位置添加:

/*↓↓↓ my theme ↓↓↓*/
/*CSS中样式覆盖优先顺序:越靠后的优先级越高。所以不需要动注释掉前面的原css样式*/
/*footnotes tooltip text*/
.pin-outline #outline-content .outline-active strong, .pin-outline .outline-active {
    font-weight: 500;
    color: var(--outline-active-color);
}
/*sidebar*/
.outline-item {
    font-size: 1rem;
}
/*quote block*/
blockquote:before {
    display: block;
    position: absolute;
    content: '';
    width: 4px;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(--blockquote-border-color);
    border-radius: 2px;
}
blockquote {
	color: var(--blockquote-color);
    border-radius: 2px;
    padding: 10px 16px;
    background-color: var(--blockquote-bg-color);
    position: relative;
    border-left: none;
}
#write strong {
    color: var(--strong-color);
    font-weight: bold;
}
#write blockquote strong {
    color: var(--blockquote-color);
}
/*↑↑↑ my theme ↑↑↑*/

由此,完毕。

修改完样式预览

1. 目录样式

自定义修改Typora原生默认github风格样式

2. 块引用样式

自定义修改Typora原生默认github风格样式文章来源地址https://www.toymoban.com/news/detail-482342.html

到了这里,关于自定义修改Typora原生默认github风格样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 修改naive ui默认样式,css变量值修改

    新项目开发使用了naive ui组件库,使用组件时涉及到css样式修改,可以直接在组件父容器上使用组件内自带的css变量,组件会自动继承父容器的css变量值,不会影响其他页面使用; 示例:一个注册表单,两个input间隔高度太大,调整高度,组件使用grid布局,代码截图:   浏览

    2024年02月12日
    浏览(50)
  • 【可视化开发】echarts配置项——修改tooltip默认样式

    在可视化开发中我们通常会遇到修改tooltip样式问题,下面分享给大家代码片段和最终呈现效果 配置项 trigger 触发类型 axis:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。 item:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 none:什么

    2023年04月09日
    浏览(73)
  • input时间表单默认样式修改(input[type=“date“])

    HTML代码: 选择日期: 选择时间: 在这里插入图片描述 选择星期: 选择月份: DateTime-Local类型: 目前WebKit下有如下9个伪元素可以改变日期控件的UI: 实例 1.问题--------date类型改变行高和高度那个小三角并不会根据大小调整,实在太丑了,所以决定把它隐藏掉。 /* 去掉dat

    2024年02月11日
    浏览(54)
  • html之input复选框变为圆形、自定义复选框、消除默认样式、去除默认样式、事件代理、事件委托

    input 标签对事件委托不起作用,需要单独在 input 上绑定事件。 w3school outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 注释:轮廓线不会占据空间,也不一定是矩形。 outline 简写属性在一个声明中设置所有的轮廓属性。 MDN CSS的 outli

    2024年02月16日
    浏览(62)
  • 修改iview的表格table展开的默认icon和样式

    修改前 修改后 修改内容

    2024年01月19日
    浏览(44)
  • 【uniapp项目路由,配置,修改uni ui默认样式,小程序端不生效问题】

    对不同端的css样式不一样 使用 #ifdef #endif 包裹 (其中 MP 表示小程序端,表仅在小程序端是那个样式) 对不同端package.json中导航配置不同 1.使用 #ifdef #endif 包裹 2.使用自带配置 button按钮中样式自带after 当写border样式的时候会有一些问题 去除after的border 使用uni.navicateTo() 路由

    2024年02月02日
    浏览(84)
  • vue -若依管理后台默认样式修改(侧边栏/主题色/网页logo等)

    修改页面: srcassetsstyleselement-variables.scss 修改后样式:    修改页面:srclayoutcomponentsTagsViewindex.vue 找到  .tags-view-container = .tags-view-wrapper = .tags-view-item = .active  这里: 修改后样式:   【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式_若

    2024年02月12日
    浏览(43)
  • 微信小程序原生button组件使用并修改样式

     想使用原生button组件,但是想使用不同样式 注意type使用得type必须和修改时选择器样式(button[type=default])一样,才能对其修改样式,否则样式不会被修改 如果是多端适配,需要使用type为default再修改样式  

    2024年02月14日
    浏览(54)
  • 微信小程序修改原生组件样式(uni-app)

    微信小程序修改原生组件样式 全局修改,直接将修改的样式写在全局的样式文件中; 特殊情况:修改swiper指示点样式时,需要包裹在swiper的样式选择器下才生效。 直接将下列代码放在全局样式中是不会生效的,需要加上swiper组件的元素选择器或swiper组件的其他样式名也可。

    2024年02月05日
    浏览(71)
  • Typora主题,设置代码块Mac风格三个小圆点

    Typora 编辑器让人们能更简单地用 Markdown语言 书写文字,解决了使用传统的Markdown编辑器写文的痛点,并且界面简洁优美,实现了实时预览等功能。 1.1 第一步打开偏好设置 1.2 第二步打开主题文件夹 可通过色卡app自行搭配一套笔记搭的颜色 表格各行变色,宽度设置为100%(个

    2024年02月17日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包