search

blinkfox / typora-vue-theme

This is a typora theme inspired by Vue document style. 一个类似于 Vue 文档风格的 Typora Markdown 编辑器主题。
https://theme.typora.io/theme/Vue/
Apache License 2.0
936 stars 180 forks source link

heading前面自动显示章节号 #5

Closed czhiling closed 6 years ago

czhiling commented 6 years ago

谢谢提供这么好的typora theme。美观实用，而且中文显示效果很赞。

有个功能不知如何实现，我希望在heading前面自动显示章节号，有些theme，例如LostKeys提供这个功能。我不熟悉CSS，所以只好来问问。我是用typora写技术文档，所以这个功能对我挺重要。

blinkfox commented 6 years ago

@czhiling 你好，我看了下LostKeys的主题，它1到3级标题前面显示的其实是标题的级别，我也大概实现了一下，但是这种个性化的需求，我就不会提交代码了。我告诉你直接在哪里改吧。

你可以在vue.css文件里面第391行之后的空白处插入如下的css代码（你也可以根据自己的需求修改下面的css样式），重启Typora或者切换主题，即可看到效果，css代码如下：

h1::before {
    content: '#1';
    margin-top: 0.6rem;
}

h2::before {
    content: '#2';
    margin-top: 0.4rem;
}

h3::before {
    content: '#3';
    margin-top: 0.1rem;
}

h1::before,
h2::before,
h3::before {
    color: #42B983;
    position: absolute;
    left: -2.1rem;
    font-weight: 400;
    font-size: 1.2rem;
}

显示效果如下：

Typora Heading Style

czhiling commented 6 years ago

非常感谢！

我刚刚发现LostKeys Dark和LostKeys实现的不一样。你上面说的是LostKeys Dark的方法。

image

如何实现附件图(lostKeys)中这一种呢？

blinkfox commented 6 years ago

@czhiling 我看和尝试了LostKeys的主题，其中也没有你所提的显示章节的功能吧，不过我还是实现了你的功能，改动代码稍微有些多，我提交push到了heading分支中，你下载这个分支的代码，将vue.css文件覆盖替换即可。

我参照Word文档中的方式来做的，H1标题是整个文档的主标题，是没有章节信息的，从H2标题开始才是文章的第一节，H3标题是文章的第二节，H4标题是文章的第三节。显示效果如下：

Heading效果

czhiling commented 6 years ago

非常感谢！可能是LostKey现在更新了，我还是过去的版本。我试了，就是希望的效果！

image