Typora 1.9.5 版主题适配

xyz349925756

早期版本相关帖子已经失效！

修改后的样子：

大纲预览


插件部分



有需要原作者的直接去下载并配置。我禁用了很多插件项。

插件下载地址： https://github.com/obgnail/typora_plugin

上面主题基于：https://github.com/liangjingkanji/DrakeTyporaTheme

下载地址
百度链接: 链接: https://pan.baidu.com/s/1LCwkJEmmyboQ2Xm_XrlmPw?pwd=52pj 提取码: 52pj
备用蓝奏下载：https://wwo.lanzn.com/b0kn7cn5g 密码:52pj

GitHub：https://github.com/xyz349925756/Typora-Mid   【主要更新地址】


如何使用？

• 打开 typora 安装目录下的 resources  将  window.html  plugin 直接复制进去。（如果不会，在桌面点击 typora 图标 右键 --> 属性 --> 打开文件所在的位置   ）
• 打开style替换文件 放到  resources\style 下覆盖即可。（我升级了font-awesome-4.7.0）  window.css 文件注释了标题前面的三个斜杠颜色。
• themes 文件是已经修改好的主题，覆盖路径 C:\Users\您的用户名\AppData\Roaming\Typora\themes  。（如果不喜欢标题样式打开主题文件前面的部分找到  h1..h6   h1 span{ ..} 这样的内容注释掉就可以了。）
  

字体已经包含在上面下载地址中。

xyz349925756

其他主题可以修改下面的css 达到同样的效果
字体部分css  

[CSS] 纯文本查看 复制代码

        --monospace:  "FiraCode Nerd Font Mono","华康手札体W5P", Menlo, "Ubuntu Mono", Consolas, HYZhengYuan; /*代码字体*/
    --text-font: "FiraCode Nerd Font Mono","华康手札体W5P"; /*正文字体*/
    --title-font: "HYZhengYuan"; /*标题字体*/
    --latex-font: "Fira Code Light"; /*LaTeX字体(不含英语)*/
    --text-line-height: 1.6; /*正文行间距*/
    --code-line-height: 1.6; /*代码块行间距*/
    --p-spacing: 0.8rem; /*段间距*/
    --text-size: 12px;

主题css

[CSS] 纯文本查看 复制代码

/* 自定义 */
span.file-node-title-name-part {
    color: #6495ed;
    font-size: 12px;
}
span.file-node-title-ext-part {
    color: #f21100;
    font-size: 12px;
}

/* 多元化引用 */
.md-alert-text-note .md-alert-text-container:after {
    content: "笔记";
  }
  .md-alert-text-tip .md-alert-text-container:after {
    content: "提示";
  }
  .md-alert-text-important .md-alert-text-container:after {
    content: "重要";
  }
  .md-alert-text-warning .md-alert-text-container:after {
    content: "警告";
  }
  .md-alert-text-caution .md-alert-text-container:after {
    content: "小心";
  }

/* 文件目录 */
.outline-item-open > .outline-item > .outline-expander:before {
    color: #2196F3;
    content: "\f261";
    font-size: 14px;
    padding-right: 4px;
}

span.outline-expander::before {
    content: "\f260";
    color: #F44336;
    font-size: 14px;
    padding-right: 4px;
}
.outline-expander:hover:before {
    content: "\f261";
    color: #ffc107;
    font-size: 14px;
    padding-right: 4px;
}

/* 标题样式 */
#top-titlebar, #top-titlebar * {
    background-color: inherit;
    /* color: inherit; */
}
span.ty-menu-btn-area-sub.ty-menu-btn-area-sub3 {
    color: green;
}

span.ty-menu-btn-area-sub.ty-menu-btn-area-sub2 {
    color: #4CAF50;
}

span.ty-menu-btn-area-sub.ty-menu-btn-area-sub1 {
    color: #E91E63;
}

/* 文件大纲 */
.active-tab-files #info-panel-tab-file .info-panel-tab-border, .active-tab-outline #info-panel-tab-outline .info-panel-tab-border {
    height: 1px;
    background-color: transparent;
    border-bottom: #e91e63 3px double;
}


/* 引用样式 */
.md-alert.md-alert-note {
    border-left-color: #0969da;
    background-image: linear-gradient(90deg, #0969da60, transparent);
    border-bottom: #0969da20 1px solid;
    padding: 4px 0px 0px 20px;
    border-radius: 5px 0px 0px 5px;
}

.md-alert.md-alert-important {
        border-left-color: #8250df;
    background-image: linear-gradient(90deg, #8250df60, transparent);
    border-bottom: #8250df20 1px solid;
    padding: 4px 0px 0px 20px;
    border-radius: 5px 0px 0px 5px;
}
.md-alert.md-alert-warning {
        border-left-color: #9a6700;
    background-image: linear-gradient(90deg, #9a670060, transparent);
    border-bottom: #9a670020 1px solid;
    padding: 4px 0px 0px 20px;
    border-radius: 5px 0px 0px 5px;
}
.md-alert.md-alert-tip {
        border-left-color: #1f883d;
    background-image: linear-gradient(90deg, #1f883d60, transparent);
    border-bottom: #1f883d20 1px solid;
    padding: 4px 0px 0px 20px;
    border-radius: 5px 0px 0px 5px;
}
.md-alert.md-alert-caution {
        border-left-color: #cf222e;
    background-image: linear-gradient(90deg, #cf222e60, transparent);
    border-bottom: #cf222e20 1px solid;
    padding: 4px 0px 0px 20px;
    border-radius: 5px 0px 0px 5px;
}

/* 水平线 */
hr {
    height: 1px;
    padding: 0;
    margin: 16px 0;
        background-image: linear-gradient(to left, #42a5f5,white);
    border: 0 none;
    overflow: hidden;
    box-sizing: content-box;
}

blockquote:before {
    display: block;
    position: absolute;
    content: '';
    width: 4px;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #2196F3;
    border-radius: 2px;
}

blockquote {
    /* color: #2196F3; */
    border-radius: 2px;
    padding: 10px 16px;
    background-image: linear-gradient(45deg, #03A9F460, transparent);
    position: relative;
    border-left: none;
    border-bottom: #03A9F420 1px solid;
}        
        
/* 标题         */
        
h1 {
      font-size: 2rem;
      text-align: center;
      padding: 0px;
      margin: 0px;
  }
  
  h1 span {
      border-radius: 0px 5px 0px 0px;
      padding: 0px 30px;
      border-left: 2px solid darkturquoise;
      border-top: 30px solid transparent;
      border-right: 100px solid darkorange;
      border-bottom: 1px solid darkorange;
          margin: 0px 20px;
  }
  
  
  h2 {
      border-bottom: solid 1px #f44336;
      /* border-right: solid 30px #f44336; */
      /* border-radius: 0px 30px 0px 0px; */
      padding: 0px;
      margin: 0px;
  }
  
  h2 span {
      background-image: linear-gradient(to right,#42a5f5,#f44336);
      border-radius: 0px 5px 0px 0px;
      padding: 2px 30px 2px;
      color: rgb(255, 255, 255);
      border-bottom: 1px orange;
      border-top: solid 1px white;
      }
  
  
  h3 span {
      background-image: linear-gradient(to right,#ffd800,#39f436);
      border-radius: 0px 6px 0px 0px;
      padding: 2px 30px 2px;
      color: white;
      border-top: solid 1px white;
  }        
  
  h3 {
      /* border-right: solid 30px #39f436; */
      border-bottom: dotted 1px #39f436;
      padding: 0px;
      margin: 0px;
      /* border-radius: 0px 0px 30px 0px; */
  }
  
  h4 span {
      background-image: linear-gradient(to right,#f44336,#ff9800);
      border-radius: 0px 5px 0px 0px;
      padding: 2px 30px 2px;
      color: white;
      border-top: solid 1px white;
  }
  h4 {
      border-bottom: dotted 1px #ff9800;
      padding: 0px;
      margin: 0px;
  }
  
  h5 span {
      background-image: linear-gradient(to right,#ff9800,#673AB7);
      border-radius: 0px 4px 0px 0px;
      padding: 2px 30px 2px;
      color: white;
      border-top: solid 1px white;
  }
  h5 {
      border-bottom: solid 1px #673AB7;
      border-right: dotted 20px #673AB7;
      padding: 0px;
      margin: 0px;
  }
  
  h6 span {
      background-image: linear-gradient(to right,#673AB7,#4CAF50);
      border-radius: 0px 4px 0px 0px;
      padding: 2px 30px 2px;
      color: white;
      border-top: solid 1px white;
  }
  h6 {
      border-bottom: solid 1px #4CAF50;
      border-right: dotted 18px #4CAF50;
      padding: 0px;
      margin: 0px;
  }        

/* 表格         */
table thead {
    background-image: linear-gradient(45deg, #428bca, transparent);
    text-align: center;
}
table tr:nth-child(1n) {
    background-image: linear-gradient(45deg, #428bca60, transparent);
}
table tr:nth-child(2n) {
    background-image: linear-gradient(45deg, #ffcc660d, transparent);
}
        
/* 自定义结束 */

xyz349925756

randomnany 发表于 2024-7-4 15:20
我一般是用 typora 记录，使用 docsify 浏览，很酷！

我使用了nginx ，docsify，typora 还做了一个本地搜索页导航页。

wyesheng

看着好厉害，需要学习学习，感谢楼主大神啦。

superluck2023

这个是真漂亮，感谢分享！markdown神器！

humuyun

感谢分享！~~

moonalong8

非常好用的 谢谢

lr957

效果不错，感谢分享！

tuablove

这个要能写个js版的就好了

sky8894

挺酷的一个主题

xyz349925756

tuablove 发表于 2024-7-2 11:33
这个要能写个js版的就好了

不想改作者的js代码，看这个作者的代码头大。

znyx

感谢分享