Typora 1.9.5 版主题适配

查看 119|回复 10
作者:xyz349925756   
早期版本相关帖子已经失效!
修改后的样子:


image-20240702093038930.png (125.54 KB, 下载次数: 0)
下载附件
2024-7-2 09:58 上传

大纲预览


image-20240702093119171.png (24.43 KB, 下载次数: 0)
下载附件
2024-7-2 09:59 上传



QQ截图20240702095957.png (141.62 KB, 下载次数: 0)
下载附件
2024-7-2 10:00 上传

插件部分


image-20240702093254108.png (202.31 KB, 下载次数: 0)
下载附件
2024-7-2 09:59 上传

有需要原作者的直接去下载并配置。我禁用了很多插件项。
插件下载地址:  https://github.com/obgnail/typora_plugin
上面主题基于:  https://github.com/liangjingkanji/DrakeTyporaTheme
下载地址
链接: https://pan.baidu.com/s/1ISqF98yck8MuBCJSVEah-Q?pwd=52pj 提取码: 52pj
GitHub:https://github.com/xyz349925756/typora_backup
如何使用?


image-20240702093540384.png (11.3 KB, 下载次数: 0)
下载附件
2024-7-2 09:59 上传

  • 打开 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{ ..} 这样的内容注释掉就可以了。)

    字体已经包含在上面下载地址中。
    字体部分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
    OP
      


    cao777 发表于 2024-7-2 14:28
    这个脑图功能是咋玩的啊

    这个脑图是插件里面的,我已经配置集成到上面下载文件中了。 你自己写好的文档 只需要点击一下 右下角像网络的那个图标它就自动生成脑图了。官网的脑图包含代码。这个插件里面只包含标题。笔记写的越好这个脑图越漂亮。颜色可以自己选择。更多可以看插件官网的说明。
    wyesheng   

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

    这个是真漂亮,感谢分享!markdown神器!
    humuyun   

    感谢分享!~~
    moonalong8   

    非常好用的 谢谢
    lr957   

    效果不错,感谢分享!
    tuablove   

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

    挺酷的一个主题
    jsongyan   

    感谢分享!
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部