@wulechuan/css-stylus-markdown-themes 7.5.1 → 7.6.2
Sign up to get free protection for your applications and to get access to all the features.
- package/ReadMe.md +132 -62
- package/package.json +36 -34
- package//346/226/207/346/241/243/351/233/206//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/225/210/346/236/234/347/244/272/344/276/213/351/233/206//345/216/237/345/247/213/347/232/204-markdown-/346/240/274/345/274/217/347/232/204/346/226/207/347/253/240/theming-example-article.zh-hans-CN.md +51 -8
- package//346/226/207/346/241/243/351/233/206//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/225/210/346/236/234/347/244/272/344/276/213/351/233/206//345/217/221/345/270/203/346/226/260/345/233/276/347/211/207/345/211/215/347/232/204/345/277/205/350/246/201/346/255/245/351/252/244.md +13 -0
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206/javascript/table-of-contents-and-back-to-top-anchor-behaviors.js +20 -5
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206/javascript/table-of-contents-and-back-to-top-anchor-behaviors.min.js +1 -1
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown--firefox-addon.default.css +1931 -91
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown--typora.default.css +1931 -91
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown--vscode.default.min.css +2 -2
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default--no-toc.css +1931 -91
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default--no-toc.min.css +2 -2
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default--with-toc.css +1959 -133
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default--with-toc.min.css +2 -2
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default--wrapped--no-toc.css +1931 -91
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default--wrapped--no-toc.min.css +2 -2
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default--wrapped--with-toc.css +1959 -133
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default--wrapped--with-toc.min.css +2 -2
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default-dark--no-toc.css +1942 -103
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default-dark--no-toc.min.css +2 -2
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default-dark--with-toc.css +1970 -145
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default-dark--with-toc.min.css +2 -2
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default-dark--wrapped--no-toc.css +1942 -103
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default-dark--wrapped--no-toc.min.css +2 -2
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default-dark--wrapped--with-toc.css +1970 -145
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default-dark--wrapped--with-toc.min.css +2 -2
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.generic-default-light--atom-one-dark--no-toc.css +1931 -91
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.generic-default-light--atom-one-dark--no-toc.min.css +2 -2
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.generic-default-light--atom-one-dark--with-toc.css +1959 -133
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.generic-default-light--atom-one-dark--with-toc.min.css +2 -2
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.generic-default-light--atom-one-dark--wrapped--no-toc.css +1931 -91
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.generic-default-light--atom-one-dark--wrapped--no-toc.min.css +2 -2
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.generic-default-light--atom-one-dark--wrapped--with-toc.css +1959 -133
- package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.generic-default-light--atom-one-dark--wrapped--with-toc.min.css +2 -2
package/ReadMe.md
CHANGED
@@ -1,6 +1,7 @@
|
|
1
|
+
# 吴乐川的 HTML 文章排版与配色之方案集
|
2
|
+
|
1
3
|
<link rel="stylesheet" href="./源代码/发布的源代码/文章排版与配色方案集/层叠样式表/wulechuan-styles-for-html-via-markdown--vscode.default.min.css">
|
2
4
|
|
3
|
-
# 吴乐川的 HTML 文章排版与配色之方案集
|
4
5
|
|
5
6
|
> 中国人——特别是汉族人,理应坚持广泛、规范地使用汉语。凡非必要之情形不说外国话、不用外国字。此乃天经地义!然则每当必要,亦不排斥采用外国之语言。不妨 **博世界之学问,养中国之精神** 。
|
6
7
|
>
|
@@ -10,7 +11,7 @@
|
|
10
11
|
|
11
12
|
## Multilingual Editions of this Article
|
12
13
|
|
13
|
-
- [English
|
14
|
+
- [English edition of this ReadMe](./文档集集/说明书/en-US/ReadMe.md)
|
14
15
|
|
15
16
|
|
16
17
|
|
@@ -29,17 +30,39 @@
|
|
29
30
|
</dl>
|
30
31
|
|
31
32
|
|
33
|
+
|
34
|
+
|
35
|
+
|
36
|
+
## 源代码仓库
|
37
|
+
|
38
|
+
| <span style="display:inline-block;width:180px;">提供仓库服务之组织</span> | <span style="display:inline-block;width:150px;">仓库组织之国别</span> | 仓库地址 |
|
39
|
+
| ------------- | :----------: | ------- |
|
40
|
+
| 码云 | 中华人民共和国 | [https://gitee.com/nanchang-wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns](https://gitee.com/nanchang-wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns) |
|
41
|
+
| 阿里云之代码仓库 | 中华人民共和国 | [https://code.aliyun.com/wulechuan/wulechuan-themes-for-htmls-via-markdowns](https://code.aliyun.com/wulechuan/wulechuan-themes-for-htmls-via-markdowns) |
|
42
|
+
| GitHub | 美 | [https://github.com/wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns](https://github.com/wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns) |
|
43
|
+
|
44
|
+
|
45
|
+
|
32
46
|
## 此物何用
|
33
47
|
|
34
|
-
|
48
|
+
本工具提供两类基本功能。且二者紧密相关。
|
49
|
+
|
50
|
+
1. 本工具用于构建一组层叠样式表(即外国话所谓 CSS)文件。
|
35
51
|
|
36
|
-
本品还额外提供了一个很小巧的 JavaScript 接口,使得其它 JavaScript 工具包亦可较方便地以程序化之方式使用这些层叠样式表( CSS )文件之内容。详见下文《[以程序化之方式取用本工具提供之内容](#以程序化之方式取用本工具提供之内容)》一节。
|
37
52
|
|
38
|
-
|
53
|
+
2. 本工具亦提供了一组现成的层叠样式表文件。
|
39
54
|
|
55
|
+
凡这些样式表,不论是本工具现成提供的还是开发者采用本工具自己创建的,均可用于美化采用超文本标记语言(即 HTML)格式的文章。于任一文章,不必同时取用多个样式表文件,仅取其一足矣。
|
40
56
|
|
57
|
+
本品还提供了一个 JavaScript 编程接口,使得其它 JavaScript 工具包亦可以程序化之方式使用这些层叠样式表文件之内容。详见下文《[以程序化之方式取用本工具提供之内容](#以程序化之方式取用本工具提供之内容)》一节。
|
41
58
|
|
42
|
-
|
59
|
+
|
60
|
+
> 不妨强调,于开发者而言,本品可以是一个样式表**构建工具**,用以相对方便地构建出新的符合特定喜好或需求的样式表文件。
|
61
|
+
|
62
|
+
|
63
|
+
|
64
|
+
|
65
|
+
## 文档集
|
43
66
|
|
44
67
|
> 以下章节均存在于单独的文件中,并非本文章之部分。
|
45
68
|
|
@@ -54,71 +77,112 @@
|
|
54
77
|
|
55
78
|
## 应用效果示例
|
56
79
|
|
57
|
-
|
80
|
+
本工具配备了两篇范文,汉语一篇,英语一篇,均套用了本工具之默认样式,以示效果。
|
81
|
+
|
82
|
+
### 已转换为 HTML 格式的范文副本
|
83
|
+
|
84
|
+
范文之截图可以较好地展示文章之(视觉层面的)样貌。但截图文件往往较大,有些竟在**百万字节**级别。因此,不妨在此先给出 HTML 文件。截图在后文也会一并给出。
|
85
|
+
|
86
|
+
|
87
|
+
HTML 范文如下:
|
88
|
+
|
89
|
+
- 《[HTML 范文(汉语版,浅色)](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/html/example.zh-hans-cn.default-light-colored-theme.html)》
|
90
|
+
- 《[HTML 范文(汉语版,深色)](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/html/example.zh-hans-cn.default-dark-colored-theme.html)》
|
91
|
+
- 《[HTML 范文(英语版,浅色)](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/html/example.en-us.default-light-colored-theme.html)》
|
92
|
+
- 《[HTML 范文(英语版,深色)](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/html/example.en-us.default-dark-colored-theme.html)》
|
93
|
+
|
94
|
+
|
95
|
+
|
96
|
+
### HTML 范文的截图
|
97
|
+
|
98
|
+
一图胜千言。以下将给出范文之截图。
|
99
|
+
|
100
|
+
> 以下各图较大,文件大小在**百万字节**级别。若网络不佳不便阅图,亦可改为下载 HTML 文件观察其面貌。见上文《[已转换为 HTML 格式的范文副本](#已转换为%20HTML%20格式的范文副本)》。
|
101
|
+
|
102
|
+
|
103
|
+
#### 范文富有特色的大幅截图
|
58
104
|
|
59
|
-
> 以下各图较大,文件大小在 **百万字节** 级别。
|
60
105
|
|
61
|
-
|
106
|
+
1. 应用了**默认浅色主题**的范文之截图
|
62
107
|
|
63
|
-
-
|
64
|
-
- [Snapshot: In default light-colored theme, in a wide window, with toc collapsed](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/example_en-US_default-light-colored-theme_1-in-a-wide-window_with-toc-collapsed.png)
|
108
|
+
- 《示例:简体中文范文配默认**浅色**主题,在宽大尺寸浏览器中的效果(目录已收叠)》
|
65
109
|
|
66
110
|
|
67
|
-
|
111
|
+
- [由(本说明书的)解析程序自动决定之存放地点的版本](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/示例:简体中文范文配默认浅色主题,1-在宽大尺寸浏览器中的效果(目录已收叠).png)
|
68
112
|
|
69
|
-
- [
|
70
|
-
- [Snapshot: In default dark-colored theme, in a wide window, with toc collapsed](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/example_en-US_default-dark-colored-theme_1-in-a-wide-window_with-toc-collapsed.png)
|
113
|
+
- [存放在 Gitee 中的版本,便于中国大陆地区查阅](https://gitee.com/nanchang-wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns/blob/master/%E6%96%87%E6%A1%A3%E9%9B%86/%E6%96%87%E7%AB%A0%E6%8E%92%E7%89%88%E4%B8%8E%E9%85%8D%E8%89%B2%E6%95%88%E6%9E%9C%E7%A4%BA%E4%BE%8B%E9%9B%86/%E4%BB%A5-html-%E6%A0%BC%E5%BC%8F%E6%B8%B2%E6%9F%93%E5%A5%BD%E7%9A%84%E6%96%87%E7%AB%A0%E6%88%90%E5%93%81/%E5%90%84%E6%96%87%E7%AB%A0%E6%9C%80%E7%BB%88%E5%91%88%E7%8E%B0%E6%95%88%E6%9E%9C%E4%B9%8B%E6%88%AA%E5%9B%BE/%E7%A4%BA%E4%BE%8B%EF%BC%9A%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87%E8%8C%83%E6%96%87%E9%85%8D%E9%BB%98%E8%AE%A4%E6%B5%85%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%8C1-%E5%9C%A8%E5%AE%BD%E5%A4%A7%E5%B0%BA%E5%AF%B8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E7%9A%84%E6%95%88%E6%9E%9C%EF%BC%88%E7%9B%AE%E5%BD%95%E5%B7%B2%E6%94%B6%E5%8F%A0%EF%BC%89.png)
|
71
114
|
|
72
115
|
|
73
|
-
|
116
|
+
- 《示例:In default **light-colored** theme, in a wide window, with toc collapsed》。
|
117
|
+
|
118
|
+
- [由(本说明书的)解析程序自动决定之存放地点的版本](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/example_en-US_default-light-colored-theme_1-in-a-wide-window_with-toc-collapsed.png)
|
119
|
+
|
120
|
+
- [存放在 Gitee 中的版本,便于中国大陆地区查阅](https://gitee.com/nanchang-wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns/blob/master/%E6%96%87%E6%A1%A3%E9%9B%86/%E6%96%87%E7%AB%A0%E6%8E%92%E7%89%88%E4%B8%8E%E9%85%8D%E8%89%B2%E6%95%88%E6%9E%9C%E7%A4%BA%E4%BE%8B%E9%9B%86/%E4%BB%A5-html-%E6%A0%BC%E5%BC%8F%E6%B8%B2%E6%9F%93%E5%A5%BD%E7%9A%84%E6%96%87%E7%AB%A0%E6%88%90%E5%93%81/%E5%90%84%E6%96%87%E7%AB%A0%E6%9C%80%E7%BB%88%E5%91%88%E7%8E%B0%E6%95%88%E6%9E%9C%E4%B9%8B%E6%88%AA%E5%9B%BE/example_en-US_default-light-colored-theme_1-in-a-wide-window_with-toc-collapsed.png)
|
121
|
+
|
122
|
+
|
123
|
+
1. 应用了**默认深色主题**的范文之截图
|
124
|
+
|
125
|
+
- 《示例:简体中文范文配默认**深色**主题,在宽大尺寸浏览器中的效果(目录已收叠)》
|
126
|
+
|
127
|
+
- [由(本说明书的)解析程序自动决定之存放地点的版本](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/示例:简体中文范文配默认深色主题,1-在宽大尺寸浏览器中的效果(目录已收叠).png)
|
128
|
+
|
129
|
+
- [存放在 Gitee 中的版本,便于中国大陆地区查阅](https://gitee.com/nanchang-wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns/blob/master/%E6%96%87%E6%A1%A3%E9%9B%86/%E6%96%87%E7%AB%A0%E6%8E%92%E7%89%88%E4%B8%8E%E9%85%8D%E8%89%B2%E6%95%88%E6%9E%9C%E7%A4%BA%E4%BE%8B%E9%9B%86/%E4%BB%A5-html-%E6%A0%BC%E5%BC%8F%E6%B8%B2%E6%9F%93%E5%A5%BD%E7%9A%84%E6%96%87%E7%AB%A0%E6%88%90%E5%93%81/%E5%90%84%E6%96%87%E7%AB%A0%E6%9C%80%E7%BB%88%E5%91%88%E7%8E%B0%E6%95%88%E6%9E%9C%E4%B9%8B%E6%88%AA%E5%9B%BE/%E7%A4%BA%E4%BE%8B%EF%BC%9A%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87%E8%8C%83%E6%96%87%E9%85%8D%E9%BB%98%E8%AE%A4%E6%B7%B1%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%8C1-%E5%9C%A8%E5%AE%BD%E5%A4%A7%E5%B0%BA%E5%AF%B8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E7%9A%84%E6%95%88%E6%9E%9C%EF%BC%88%E7%9B%AE%E5%BD%95%E5%B7%B2%E6%94%B6%E5%8F%A0%EF%BC%89.png)
|
130
|
+
|
131
|
+
- 《示例:In default **dark-colored** theme, in a wide window, with toc collapsed》。
|
132
|
+
|
133
|
+
- [由(本说明书的)解析程序自动决定之存放地点的版本](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/example_en-US_default-dark-colored-theme_1-in-a-wide-window_with-toc-collapsed.png)
|
134
|
+
|
135
|
+
- [存放在 Gitee 中的版本,便于中国大陆地区查阅](https://gitee.com/nanchang-wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns/blob/master/%E6%96%87%E6%A1%A3%E9%9B%86/%E6%96%87%E7%AB%A0%E6%8E%92%E7%89%88%E4%B8%8E%E9%85%8D%E8%89%B2%E6%95%88%E6%9E%9C%E7%A4%BA%E4%BE%8B%E9%9B%86/%E4%BB%A5-html-%E6%A0%BC%E5%BC%8F%E6%B8%B2%E6%9F%93%E5%A5%BD%E7%9A%84%E6%96%87%E7%AB%A0%E6%88%90%E5%93%81/%E5%90%84%E6%96%87%E7%AB%A0%E6%9C%80%E7%BB%88%E5%91%88%E7%8E%B0%E6%95%88%E6%9E%9C%E4%B9%8B%E6%88%AA%E5%9B%BE/example_en-US_default-dark-colored-theme_1-in-a-wide-window_with-toc-collapsed.png)
|
136
|
+
|
137
|
+
|
138
|
+
#### 范文的所有截图
|
74
139
|
|
75
140
|
两篇范文之截图不止于上文中提及的四幅。更多图例,见:
|
76
141
|
|
77
142
|
- 《[应用效果示例(汉语版)](./文档集/说明书/汉语/关于文章排版与配色效果示例集的说明.md)》
|
78
|
-
- 《[
|
143
|
+
- 《[应用效果示例(英语版)](./文档集/说明书/en-US/application-examples.md)》
|
79
144
|
|
80
|
-
|
145
|
+
#### 范文截图制作指南
|
81
146
|
|
147
|
+
另,日常制作网页截图是很简单的事情,但本工具之范文篇幅巨大,为其截图确须一定经验和技巧。见《[示范文章之截图之制作指南](./文档集/说明书/汉语/示范文章之截图之制作指南.md)》。
|
82
148
|
|
83
149
|
|
84
150
|
|
85
|
-
## 源代码仓库
|
86
151
|
|
87
|
-
| <span style="display:inline-block;width:180px;">提供仓库服务之组织</span> | <span style="display:inline-block;width:150px;">仓库组织之国别</span> | 仓库地址 |
|
88
|
-
| ------------- | :----------: | ------- |
|
89
|
-
| 码云 | 中华人民共和国 | [https://gitee.com/nanchang-wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns](https://gitee.com/nanchang-wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns) |
|
90
|
-
| 阿里云之代码仓库 | 中华人民共和国 | [https://code.aliyun.com/wulechuan/wulechuan-themes-for-htmls-via-markdowns](https://code.aliyun.com/wulechuan/wulechuan-themes-for-htmls-via-markdowns) |
|
91
|
-
| GitHub | 美 | [https://github.com/wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns](https://github.com/wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns) |
|
92
152
|
|
153
|
+
## 使用说明
|
93
154
|
|
155
|
+
### 使用须知
|
94
156
|
|
95
|
-
|
157
|
+
本工具提供一组层叠样式表(CSS)文件,及配套的 JavaScript 文件(目前仅一个这样的 JavaScript 文件)。它们可用于装点 HTML 文章之样貌,也为文章提供额外的交互行为。应该指出,被装点的文章可以是任何人以任何方式创建的 HTML 文件,但常见的情形往往是这些 HTML 文件系从 MarkDown 文件转换而得。**但重点在于本工具提供的主体内容仅限层叠样式表文件。**
|
96
158
|
|
97
|
-
|
159
|
+
换言之,本工具**并不能**将 Markdown 文件转换为对应的 HTML 文件。本工具假定诸君各自另有办法将 Markdown 内容转换成 HTML 内容,诸君采用本工具仅仅是希望取其中的 CSS 对诸君的 HTML 做进一步的排版美化。于此种情形,用法再简单不过——**自行取用那些 CSS 文件**即可。
|
98
160
|
|
99
161
|
|
100
|
-
|
162
|
+
所谓自行取用,即是说诸君在本项目之发布文件夹中自行找到中意之 CSS 文件(及配套 JavaScript 文件),采用之。且于单一 HTML 文件,在本工具提供之所有 CSS 文件取用其任一足矣,不必取用多者。
|
101
163
|
|
102
|
-
|
164
|
+
又,取用本工具提供之 CSS 、 JavaScript 文件之内容时,若每每人为复制、粘贴,未免麻烦。尤其是在面对批量运用或自动化运用之要求时,开发人员当然希望能编写程序调集所需资源加以运用。刚巧本工具确实提供了专门的 JavaScript 编程接口,以 **JavaScript 文本(string)** 之形式提供各 CSS 、 JavaScript 文件之内容。见下文《[以程序化之方式取用本工具提供之内容](#以程序化之方式取用本工具提供之内容)》。
|
103
165
|
|
104
166
|
|
105
|
-
|
106
|
-
|
107
|
-
|
167
|
+
> 不过,不论是手工直接取用本工具中之 CSS 文件,还是调用本工具之 JavaScript 接口取用这些 CSS 文件,都没有解决一部分读者的困难:你们的初衷是要将手头的一些 Markdown 文件转换成 HTML 文件,而采用我提供的这些 CSS 只是锦上添花式的要求。临用之际,单单一个 CSS 文件显然不解燃眉之急。
|
168
|
+
>
|
169
|
+
> 此种情形下,诸君首先需要的是一款可以进行文件格式转换之工具,而后才考虑如何将本工具提供之 CSS 嵌入 HTML 之中。
|
170
|
+
>
|
171
|
+
> 那么新的问题来了,我能不能**顺便**推荐几款能将 MarkDown 文件转换至 HTML 文件的工具呢?当然!鄙人毛遂自荐,愿助诸君一臂之力!鄙人另行自创有三个工具,专用于轻松、快速地从 Markdown 内容构建对应之 HTML 内容。且三者均默认采用本工具发布之 CSS 之内容(及配套 JavaScript 内容)。我在[本说明书之尾部](#相关工具之推广)亦对此三款软件包做了推广。诸君无需另起炉灶了!唯愿三者之任一能对君有所裨益!
|
108
172
|
|
109
173
|
|
110
|
-
|
174
|
+
又,如果阁下取用本工具中之 CSS 主题文件另有意图,即与将 Markdown 转换至 HTML 之事毫无干系,那么或许更应该了解如何编写程序调集所需的由本工具提供之 CSS 资源加以运用。见下文《[以程序化之方式取用本工具提供之内容](#以程序化之方式取用本工具提供之内容)》。
|
111
175
|
|
112
176
|
|
113
|
-
###
|
177
|
+
### 手工取用本工具的文件
|
114
178
|
|
115
179
|
#### 取用 CSS 文件
|
116
180
|
|
117
|
-
请在 `./源代码/发布的源代码/文章排版与配色方案集/层叠样式表`
|
181
|
+
请在 `./源代码/发布的源代码/文章排版与配色方案集/层叠样式表` 文件夹下自行获取所需的样式表文件。
|
118
182
|
|
119
183
|
#### 取用 Javascript 文件
|
120
184
|
|
121
|
-
请在 `./源代码/发布的源代码/文章排版与配色方案集/javascript`
|
185
|
+
请在 `./源代码/发布的源代码/文章排版与配色方案集/javascript` 文件夹下自行获取所需的 JavaScript 文件。
|
122
186
|
|
123
187
|
|
124
188
|
### 以程序化之方式取用本工具提供之内容
|
@@ -127,11 +191,13 @@
|
|
127
191
|
|
128
192
|
在面对批量运用或自动化运用之要求时,开发人员当然希望能编写程序调集所需资源加以运用。本工具确实提供了专门的 JavaScript 编程接口,以 JavaScript 字符串数据的形式提供各 CSS 、 JavaScript 文件之内容。
|
129
193
|
|
130
|
-
> 本工具还额外提供了编程接口配套的 TypeScript
|
194
|
+
> 本工具还额外提供了编程接口配套的 TypeScript 类型定义:\
|
195
|
+
> `源代码/发布的源代码/本工具作为其他-javascript-工具之依赖模块时的代码/index.d.ts`
|
131
196
|
|
132
|
-
|
197
|
+
#### 以程序化之方式取用本工具提供之内容之示范代码
|
133
198
|
|
134
|
-
>
|
199
|
+
> 下例中代码之主体节选自本项目的\
|
200
|
+
> 《`测试集/用于测试本项目之-javascript-接口的测试代码集.js`》。
|
135
201
|
|
136
202
|
```js
|
137
203
|
const {
|
@@ -224,7 +290,7 @@ const 这还是目前唯一的Javascript文件之内容全文 = 获取某一已
|
|
224
290
|
```
|
225
291
|
|
226
292
|
|
227
|
-
####
|
293
|
+
#### 本工具特有的所谓“文件简易描述项”
|
228
294
|
|
229
295
|
其 TypeScript 类型定义如下:
|
230
296
|
|
@@ -234,7 +300,7 @@ declare type 范_吴乐川用于美化文章的层叠样式表集_文件简易
|
|
234
300
|
文件之相对路径: string;
|
235
301
|
文件之绝对路径: string;
|
236
302
|
文件内容全文: string;
|
237
|
-
|
303
|
+
|
238
304
|
// 以下为陈旧的采用外国字命名之诸接口。
|
239
305
|
|
240
306
|
fileName: string;
|
@@ -244,22 +310,26 @@ declare type 范_吴乐川用于美化文章的层叠样式表集_文件简易
|
|
244
310
|
};
|
245
311
|
```
|
246
312
|
|
247
|
-
####
|
313
|
+
#### 获取本工具发布之各排版与配色方案公用的(且目前唯一的) JavaScript 文件
|
248
314
|
|
249
|
-
|
315
|
+
首先,**须知本工具提供两类用途不同之 JavaScript 。**
|
250
316
|
|
251
|
-
1.
|
252
|
-
|
317
|
+
1. 一类是用于注入 HTML 文章以控制 HTML 文章之【纲要】的。
|
318
|
+
1. 另一类是本工具提供的程序化接口,它并不直接作用于你的任何 HTML,而仅仅是对外提供本 NPM 包之 CSS 以及第一类 JavaScript 。
|
253
319
|
|
254
|
-
|
320
|
+
为方便指代,不妨:
|
255
321
|
|
256
|
-
|
322
|
+
1. 称第一类 JavaScript 为所谓“**文章行为之 js** ”,简称“**文章 js**”。目前恰好仅有一个这样的 js 文件。它为本工具发布之各色【文章排版与配色方案】所公用。
|
323
|
+
1. 而称第二类 JavaScript 为所谓“**本工具接口之 js** ”,简称“**接口 js** ”。
|
257
324
|
|
258
|
-
|
325
|
+
又,借助“**接口 js**”获取“**文章 js**”之内容时,“接口 js”还**允许对“文章 js”之内容进行些许临时定制**。故而,最终获得的内容字符串有异于本工具存储的原始版本。换言之,你调用本工具的“**接口 js**”中的某接口函数时,可在接口函数的某一项参数传入【配置项集】,以对 “**文章 js**”之内容做些许改变。
|
259
326
|
|
260
327
|
> 有两个不同的接口函数各自可以接受该配置项集,但形参位置不同。
|
261
|
-
> 1.
|
262
|
-
>
|
328
|
+
> 1. 第一个函数是\
|
329
|
+
> `总接口.获取某一已发布之文件之完整内容字符串` ,它在**第 3 形参**接受上述【配置项集】。
|
330
|
+
>
|
331
|
+
> 1. 第二个函数是\
|
332
|
+
> `总接口.获取本项目官方选定之所谓默认Javascript之完整内容字符串` ,它在**第 2 形参**接受上述【配置项集】。
|
263
333
|
|
264
334
|
上述【配置项集】之 TypeScript 类型定义如下:
|
265
335
|
|
@@ -271,13 +341,13 @@ declare type 范_吴乐川用于美化文章的层叠样式表集_拾取默认Ja
|
|
271
341
|
*/
|
272
342
|
|
273
343
|
为求文章纲要列表简洁明了故意仅显示两层条目以至于较深层级条目形同作废?: boolean;
|
274
|
-
浏览器打开HTML文章最初之时文章纲要列表中凡层级深于该值之条目均应收叠?:
|
344
|
+
浏览器打开HTML文章最初之时文章纲要列表中凡层级深于该值之条目均应收叠?: number;
|
275
345
|
浏览器打开HTML文章最初之时若浏览器窗口足够宽大则直接展开文章纲要列表之面板?: boolean;
|
276
|
-
|
346
|
+
|
277
347
|
// 以下为陈旧的采用外国字命名之诸接口。
|
278
348
|
|
279
349
|
shouldShowOnlyTwoLevelsOfTOCItemsAtMost?: boolean;
|
280
|
-
atBeginingShouldCollapseAllTOCItemsOfLevelsGreaterThan?:
|
350
|
+
atBeginingShouldCollapseAllTOCItemsOfLevelsGreaterThan?: number;
|
281
351
|
atBeginingShouldExpandTOCWhenWindowIsWideEnough?: boolean;
|
282
352
|
};
|
283
353
|
```
|
@@ -290,13 +360,13 @@ declare type 范_吴乐川用于美化文章的层叠样式表集_拾取默认Ja
|
|
290
360
|
-----
|
291
361
|
|
292
362
|
|
293
|
-
##
|
363
|
+
## 相关工具之推广
|
294
364
|
|
295
|
-
鄙人另有一款 NPM 包,名为“[@wulechuan/generate-html-via-markdown](https://www.npmjs.com/package/@wulechuan/generate-html-via-markdown)
|
365
|
+
鄙人另有一款 NPM 包,名为“[@wulechuan/generate-html-via-markdown](https://www.npmjs.com/package/@wulechuan/generate-html-via-markdown)”。为便于指称,不妨暂称“**甲**”。调用甲之接口,可将传入该接口的 Markdown 字符串转换成 HTML 字符串。此时,甲默认会采用本工具提供的 CSS 文件来装饰甲自身产生的 HTML 之内容。
|
296
366
|
|
297
367
|
鄙人还有一款 NPM 包,名为“[@wulechuan/gulp-markdown-to-html](https://www.npmjs.com/package/@wulechuan/gulp-markdown-to-html)”,且作“**乙**”。乙恰如甲的一个包覆层,使得甲中之功能特性可以适配 [Gulpjs](https://gulpjs.com) 任务流水线。
|
298
368
|
|
299
|
-
鄙人还有一款 NPM 包,名为“[@wulechuan/markdown-to-html-via-cli](https://www.npmjs.com/package/@wulechuan/markdown-to-html-via-cli)”,且作“**丙**”。丙恰如甲的另一个包覆层,使得任何人在安装丙后(**无须另行安装甲**),即可在命令行环境轻松使用甲之功能,实现从文件到文件的**批量转换**。且丙设计有多种命令行参数,以便定制输出之 HTML
|
369
|
+
鄙人还有一款 NPM 包,名为“[@wulechuan/markdown-to-html-via-cli](https://www.npmjs.com/package/@wulechuan/markdown-to-html-via-cli)”,且作“**丙**”。丙恰如甲的另一个包覆层,使得任何人在安装丙后(**无须另行安装甲**),即可在命令行环境轻松使用甲之功能,实现从文件到文件的**批量转换**。且丙设计有多种命令行参数,以便定制输出之 HTML 之具体细节。诸君毋需担心命令行参数记忆负担过重之问题,仅需“`--help`”一招,即可解君之忧。
|
300
370
|
|
301
371
|
|
302
372
|
|
@@ -304,13 +374,7 @@ declare type 范_吴乐川用于美化文章的层叠样式表集_拾取默认Ja
|
|
304
374
|
|
305
375
|
## 未来计划
|
306
376
|
|
307
|
-
|
308
|
-
|
309
|
-
> 该项工作已经在进行,全靠业余之投入,截止 2021-03-13 仍未完成。
|
310
|
-
|
311
|
-
- 考虑引入更多的 Stylus 变量,来控制主题。但我有疑虑。过分工程化可能反而导致源代码难以理解,不便定制。
|
312
|
-
|
313
|
-
- 覆盖 Typora 中“纲要列表”的原有样式?
|
377
|
+
暂无。
|
314
378
|
|
315
379
|
|
316
380
|
## 版本 6 及更旧版本之源代码业已删除
|
@@ -319,6 +383,12 @@ declare type 范_吴乐川用于美化文章的层叠样式表集_拾取默认Ja
|
|
319
383
|
|
320
384
|
1. 旧版代码不复存在。
|
321
385
|
2. 当前的范文截图常常与代码所能产出之真正面貌有所差异,因为范文更新进度多半时候落后于代码,也落后于 NPM 版本发布。
|
386
|
+
|
387
|
+
> 最末发布的截图系针对本工具之 `v7.6.0` 版,各图均制作于 2022 年 5 月 1 日。
|
388
|
+
>
|
389
|
+
> 但若再有新图发布替换旧图,亦可因为本人遗漏对此文之修订而令上述版本、发布日期均不实。
|
390
|
+
|
391
|
+
|
322
392
|
3. 未来是否因为代码仓库累计尺寸巨大而再次清空代码仓库从头提交代码,亦未可知。
|
323
393
|
|
324
394
|
|
@@ -326,7 +396,7 @@ declare type 范_吴乐川用于美化文章的层叠样式表集_拾取默认Ja
|
|
326
396
|
|
327
397
|
WTFPL
|
328
398
|
|
329
|
-
>
|
399
|
+
> ### 注意
|
330
400
|
>
|
331
401
|
> 我未研究过许可证的约束。因此姑且声明为 WTFPL 类型。但实际上该许可证类型可能与我采用的开源模块有冲突。
|
332
402
|
|
package/package.json
CHANGED
@@ -2,8 +2,8 @@
|
|
2
2
|
"name": "@wulechuan/css-stylus-markdown-themes",
|
3
3
|
"author": "吴乐川 <wulechuan@live.com>",
|
4
4
|
"license": "WTFPL",
|
5
|
-
"version": "7.
|
6
|
-
"description": "此为吴乐川的《HTML 文章排版与配色之方案集与相关制作工具》。本工具可用于构建一组层叠样式表(即 CSS
|
5
|
+
"version": "7.6.2",
|
6
|
+
"description": "此为吴乐川的《HTML 文章排版与配色之方案集与相关制作工具》。本工具可用于构建一组层叠样式表(即 CSS )文件。本工具亦提供了一组现成的层叠样式表文件。凡这些样式表,均可用于美化超文本标记语言(即 HTML)格式的文章。于单一文章,不必同时取用多个样式表文件,仅取其一足矣。",
|
7
7
|
"directories": {
|
8
8
|
"source": "源代码/原始的源代码",
|
9
9
|
"dist": "源代码/发布的源代码",
|
@@ -12,6 +12,7 @@
|
|
12
12
|
},
|
13
13
|
"main": "源代码/发布的源代码/本工具作为其他-javascript-工具之依赖模块时的代码/index.js",
|
14
14
|
"types": "源代码/发布的源代码/本工具作为其他-javascript-工具之依赖模块时的代码/index.d.ts",
|
15
|
+
"type": "commonjs",
|
15
16
|
"scripts": {
|
16
17
|
"eslint": "eslint ./.eslintrc.js ./gulpfile.esm.js/**/*.js ./文档集/文章排版与配色效果示例集/*.js ./测试集/*.js ./源代码/发布的源代码/本工具作为其他-javascript-工具之依赖模块时的代码/*.js ./源代码/原始的源代码/用于设计文章排版与配色方案的代码/js/**/*.js ./本项目之全局配置项集.js",
|
17
18
|
"open-firefox-for-snapshots": "start firefox ./测试集/产生的临时文件/示例性-html-文件集(均嵌有半自动化截图辅助逻辑)/example.en-us.default-light-colored-theme.html ./测试集/产生的临时文件/示例性-html-文件集(均嵌有半自动化截图辅助逻辑)/example.en-us.default-dark-colored-theme.html ./测试集/产生的临时文件/示例性-html-文件集(均嵌有半自动化截图辅助逻辑)/example.zh-hans-cn.default-light-colored-theme.html ./测试集/产生的临时文件/示例性-html-文件集(均嵌有半自动化截图辅助逻辑)/example.zh-hans-cn.default-dark-colored-theme.html",
|
@@ -31,9 +32,40 @@
|
|
31
32
|
"test": "npm run eslint && npm run _test-all-without-linting-without-browser && npm run open-firefox-for-snapshots && npm run open-dev-htmls",
|
32
33
|
"build": "npm run eslint && npm run _build && npm run update-example-htmls",
|
33
34
|
"build-2": "npm run eslint && npm run _build-2 && npm run update-example-htmls-2",
|
34
|
-
"
|
35
|
+
"发布新图片之前对开发者做出提醒": "node ./文档集/文章排版与配色效果示例集/供-nodejs-调用--发布新图片前的必要步骤.js & code ./文档集/文章排版与配色效果示例集/发布新图片前的必要步骤.md",
|
36
|
+
"每当制作集得之版本之前": "npm i && npm test && npm run 发布新图片之前对开发者做出提醒",
|
35
37
|
"prepublishOnly": "npm i && npm test"
|
36
38
|
},
|
39
|
+
"dependencies": {
|
40
|
+
"globby": "^11.1.0"
|
41
|
+
},
|
42
|
+
"devDependencies": {
|
43
|
+
"@wulechuan/cli-scripts--git-push": "^2.0.3",
|
44
|
+
"@wulechuan/generate-html-via-markdown": "^3.2.2",
|
45
|
+
"@wulechuan/gulp-classical-task-cycle": "^0.3.0",
|
46
|
+
"chalk": "^4.1.2",
|
47
|
+
"cssnano": "^5.1.7",
|
48
|
+
"del": "^6.0.0",
|
49
|
+
"eslint": "^8.14.0",
|
50
|
+
"esm": "^3.2.25",
|
51
|
+
"fs-extra": "^10.1.0",
|
52
|
+
"gulp": "^4.0.2",
|
53
|
+
"gulp-concat": "^2.6.1",
|
54
|
+
"gulp-pipe": "^1.0.4",
|
55
|
+
"gulp-postcss": "^9.0.1",
|
56
|
+
"gulp-rename": "^2.0.0",
|
57
|
+
"gulp-stylus": "^2.7.1",
|
58
|
+
"gulp-terser": "^2.1.0",
|
59
|
+
"postcss": "^8.4.13"
|
60
|
+
},
|
61
|
+
"homepage": "https://github.com/wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns#readme",
|
62
|
+
"repository": {
|
63
|
+
"type": "git",
|
64
|
+
"url": "git+https://github.com/wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns.git"
|
65
|
+
},
|
66
|
+
"bugs": {
|
67
|
+
"url": "https://github.com/wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns/issues"
|
68
|
+
},
|
37
69
|
"keywords": [
|
38
70
|
"markdown",
|
39
71
|
"html",
|
@@ -64,35 +96,5 @@
|
|
64
96
|
"stylus",
|
65
97
|
"cascading-style-sheet",
|
66
98
|
"cascading-style-sheets"
|
67
|
-
]
|
68
|
-
"homepage": "https://github.com/wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns#readme",
|
69
|
-
"repository": {
|
70
|
-
"type": "git",
|
71
|
-
"url": "git+https://github.com/wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns.git"
|
72
|
-
},
|
73
|
-
"bugs": {
|
74
|
-
"url": "https://github.com/wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns/issues"
|
75
|
-
},
|
76
|
-
"dependencies": {
|
77
|
-
"globby": "^11.1.0"
|
78
|
-
},
|
79
|
-
"devDependencies": {
|
80
|
-
"@wulechuan/cli-scripts--git-push": "^2.0.2",
|
81
|
-
"@wulechuan/generate-html-via-markdown": "^3.2.0",
|
82
|
-
"@wulechuan/gulp-classical-task-cycle": "^0.3.0",
|
83
|
-
"chalk": "^4.1.2",
|
84
|
-
"cssnano": "^5.1.7",
|
85
|
-
"del": "^6.0.0",
|
86
|
-
"eslint": "^8.14.0",
|
87
|
-
"esm": "^3.2.25",
|
88
|
-
"fs-extra": "^10.1.0",
|
89
|
-
"gulp": "^4.0.2",
|
90
|
-
"gulp-concat": "^2.6.1",
|
91
|
-
"gulp-pipe": "^1.0.4",
|
92
|
-
"gulp-postcss": "^9.0.1",
|
93
|
-
"gulp-rename": "^2.0.0",
|
94
|
-
"gulp-stylus": "^2.7.1",
|
95
|
-
"gulp-terser": "^2.1.0",
|
96
|
-
"postcss": "^8.4.12"
|
97
|
-
}
|
99
|
+
]
|
98
100
|
}
|
@@ -64,14 +64,57 @@
|
|
64
64
|
|
65
65
|
再来看看行文中的【代码词汇】、【专有名词】和【术语】:例如`grep`、`孙行者`和`中央处理单元`。又如`querySelector`和`querySelectorAll`早已取代了老式的`getElementsById`等函数。术语框中的多个连续空格也应得到保留,例如`这后面有四个空格 这前面有四个空格`。
|
66
66
|
|
67
|
-
|
67
|
+
术语与超链接还可组合为一体。甚至与着重、斜体等效果进行组合。新中国的建立和成长离不开一群功勋卓著的科学家们。例如伟大的、富有爱国主义精神和民族自信的[`钱学森`](https://baike.baidu.com/item/%E9%92%B1%E5%AD%A6%E6%A3%AE/26105),**他是 `中国科学院资深院士`、 `中国工程院资深院士`。** *他提出的`钱学森弹道`至今(2022年4月)仍是 __无法拦截的__* !如今,我们在科技领域面临的两大钳制是 _**粮食`育种`技术**_ 和 **_高性能`光刻机`制造技术_** 。
|
68
|
+
|
68
69
|
|
69
70
|
计算机键盘快捷键,其视觉样式如是:<kbd>Ctrl</kbd>+<kbd> </kbd>;又例:如今,<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>s</kbd>这一组合键早已广泛用于各种现代计算机软件中,代表(将工作内容或文件)`另存为`(壹文件)之功能。
|
70
71
|
|
71
|
-
|
72
|
+
还有些内容会故意“杠掉”,即被中划线划去,表示此内容不正确,不应采纳,应作废。例如:~~地球是平的~~。术语或专有名词也可以标记为废弃,例:非必要不用舶来词。不应称 ~~`车厘子`~~ ,而应称 `进口樱桃` 。不应称 ~~`芝士`~~ 、 ~~`起司`~~ ,而应称 `奶酪` 。还有两个作废的超链接: ~~[`SOFTIMAGE.com`](http://softimage.com/)~~ 和 ~~[`假设已经删除的章节的文内链接`](#)~~ 。
|
73
|
+
|
74
|
+
#### 复杂的样式组合
|
75
|
+
|
76
|
+
|
77
|
+
再看几个“近乎终极”的组合效果——具有着重斜体强调的带有超链接的术语。为什么不止一个?因为 HTML 标签的嵌套组合是很灵活的,偏偏 MarkDown 的语法又允许制造出这几种组合。如下。
|
78
|
+
|
79
|
+
- 着重符号(即星号与下划线)包裹在方括号外的效果:我们中国有 **_了不起的民营企业[`华为`](https://consumer.huawei.com/cn/)公司_** 或我们中国有 _**了不起的民营企业[`福耀玻璃`](https://www.fuyaogroup.com/)公司**_。
|
80
|
+
|
81
|
+
上例的 MarkDown 源码:
|
82
|
+
|
83
|
+
```md
|
84
|
+
**_了不起的民营企业[`华为`](https://consumer.huawei.com/cn/)公司_**
|
85
|
+
```
|
86
|
+
|
87
|
+
```md
|
88
|
+
_**了不起的民营企业[`福耀玻璃`](https://www.fuyaogroup.com/)公司**_
|
89
|
+
```
|
90
|
+
|
91
|
+
- 着重符号(即星号与下划线)在方括号内:我们中国有 [**_了不起的民营企业`华为`公司_**](https://consumer.huawei.com/cn/) 或我们中国有 [_**了不起的民营企业`福耀玻璃`公司**_](https://www.fuyaogroup.com/)。
|
92
|
+
|
93
|
+
上例的 MarkDown 源码:
|
94
|
+
|
95
|
+
```md
|
96
|
+
[**_了不起的民营企业_`华为`公司_**](https://consumer.huawei.com/cn/)
|
97
|
+
```
|
98
|
+
|
99
|
+
```md
|
100
|
+
[_**_了不起的民营企业`福耀玻璃`公司**_](https://www.fuyaogroup.com/)
|
101
|
+
```
|
102
|
+
|
103
|
+
不难看出,我的策略是任凭它如何组合,我总是令它们的视觉效果一致。因为我认为尽管文章作者处于任何原因采用了不一致的书写方式,但他意图达到的目的是相同的。
|
104
|
+
|
105
|
+
你以为这就完了?非也!倘若再加上删除线呢?那就更复杂了!例如:每每危难时刻,不论哪一个国家或地区,总有昧着良心的人在 ~~[**_`发国难财`_**](https://baike.baidu.com/item/%E5%8F%91%E5%9B%BD%E9%9A%BE%E8%B4%A2/15514820)~~ 、 [~~**_`发国难财`_**~~](https://baike.baidu.com/item/%E5%8F%91%E5%9B%BD%E9%9A%BE%E8%B4%A2/15514820) 、 [**~~_`发国难财`_~~**](https://baike.baidu.com/item/%E5%8F%91%E5%9B%BD%E9%9A%BE%E8%B4%A2/15514820) 或 [**_~~`发国难财`~~_**](https://baike.baidu.com/item/%E5%8F%91%E5%9B%BD%E9%9A%BE%E8%B4%A2/15514820) ,以及 ~~**_[`发国难财`](https://baike.baidu.com/item/%E5%8F%91%E5%9B%BD%E9%9A%BE%E8%B4%A2/15514820)_**~~ 、 **~~_[`发国难财`](https://baike.baidu.com/item/%E5%8F%91%E5%9B%BD%E9%9A%BE%E8%B4%A2/15514820)_~~** 或 **_~~[`发国难财`](https://baike.baidu.com/item/%E5%8F%91%E5%9B%BD%E9%9A%BE%E8%B4%A2/15514820)~~_** 。这些人终将受到历史的审判!
|
106
|
+
|
107
|
+
去掉超链接再试试:中国南宋时期有一个十恶不赦的奸佞宰相,名唤 ~~__*`秦桧`*__~~ 、 __~~*`秦桧`*~~__ 、 __*~~`秦桧`~~*__ 或 *__~~`秦桧`~~__* ,他陷害了*爱国将领 [`岳飞`](https://baike.baidu.com/item/%E5%B2%B3%E9%A3%9E/127844)* 。
|
108
|
+
|
109
|
+
> 注:排列组合的可能性太多,示例不一而足。
|
110
|
+
|
111
|
+
|
112
|
+
#### 须知**着重**或*强调*乃至~~作废~~的文字以及`专有名词`亦可能出现在标题中
|
113
|
+
|
114
|
+
上善若水,水善利万物而不争。
|
72
115
|
|
73
116
|
|
74
|
-
####
|
117
|
+
#### 多级列表之示范
|
75
118
|
|
76
119
|
1. 第 1 级第 1 项
|
77
120
|
|
@@ -112,7 +155,7 @@
|
|
112
155
|
- 壬:巡海夜叉
|
113
156
|
- 癸:长生云
|
114
157
|
|
115
|
-
6. 第 1 级第 6
|
158
|
+
6. 第 1 级第 6 项。“`81192`,收到请返航。”
|
116
159
|
|
117
160
|
|
118
161
|
### 多级标题(这是 h3)
|
@@ -302,7 +345,7 @@ CSS Object Model 是一组允许用 JavaScript 操纵 CSS 的 API。 它是继 D
|
|
302
345
|
> `circumference` [sər'kʌmf(ə)rəns] <i>n.</i> 圆周长
|
303
346
|
|
304
347
|
- <details open>
|
305
|
-
<summary
|
348
|
+
<summary>在折叠内容块中的代码块1</summary>
|
306
349
|
|
307
350
|
```js
|
308
351
|
var age = +prompt('你多大了?');
|
@@ -313,12 +356,12 @@ CSS Object Model 是一组允许用 JavaScript 操纵 CSS 的 API。 它是继 D
|
|
313
356
|
|
314
357
|
|
315
358
|
|
316
|
-
####
|
359
|
+
#### 在折叠内容块中的代码块
|
317
360
|
|
318
|
-
|
361
|
+
下面是在折叠内容块中的代码块。
|
319
362
|
|
320
363
|
<details open>
|
321
|
-
<summary
|
364
|
+
<summary>在折叠内容块中的代码块2</summary>
|
322
365
|
|
323
366
|
```js
|
324
367
|
console.log(NaN === NaN); // false
|
@@ -0,0 +1,13 @@
|
|
1
|
+
# 吴乐川的 HTML 文章排版与配色之方案集发布范文的新截图之前的必要步骤
|
2
|
+
|
3
|
+
|
4
|
+
<link rel="stylesheet" href="../../源代码/发布的源代码/文章排版与配色方案集/层叠样式表/wulechuan-styles-for-html-via-markdown--vscode.default.min.css">
|
5
|
+
|
6
|
+
|
7
|
+
1. 确保图片数目齐全。目前应为 25 张。
|
8
|
+
|
9
|
+
2. 采用任何图像处理工具,将图片文件字节数尽量减小。
|
10
|
+
|
11
|
+
3. 修订《说明书》中的该小节《[**版本 6 及更旧版本之源代码业已删除**](../../ReadMe.md#版本%206%20及更旧版本之源代码业已删除)》以如实记载新图片的制作和发布日期、对应该工具的版本等信息。
|
12
|
+
|
13
|
+
4. 修订《[关于文章排版与配色效果示例集的说明](../%E8%AF%B4%E6%98%8E%E4%B9%A6/%E6%B1%89%E8%AF%AD/%E5%85%B3%E4%BA%8E%E6%96%87%E7%AB%A0%E6%8E%92%E7%89%88%E4%B8%8E%E9%85%8D%E8%89%B2%E6%95%88%E6%9E%9C%E7%A4%BA%E4%BE%8B%E9%9B%86%E7%9A%84%E8%AF%B4%E6%98%8E.md)》以及《[application-examples](../%E8%AF%B4%E6%98%8E%E4%B9%A6/en-US/application-examples.md)》,以如实记载所采用的浏览器品牌。
|
@@ -17,9 +17,9 @@ window.atBeginingShouldExpandTOCWhenWindowIsWideEnough = false
|
|
17
17
|
const printDoubleLine = '='.repeat(fullWidth)
|
18
18
|
|
19
19
|
const emailAddress = 'wulechuan@live.com'
|
20
|
-
const timeStamp = '北京时间
|
20
|
+
const timeStamp = '北京时间 2022-05-01'
|
21
21
|
|
22
|
-
const welcomeZhHansCN = '
|
22
|
+
const welcomeZhHansCN = '欢迎使用吴乐川设计的用于“控制文章目录之交互”的控制器。'
|
23
23
|
const welcomeEn = 'Welcome to wulechuan\'s article TOC controller.'
|
24
24
|
|
25
25
|
const words = '中国人——特别是汉族人,理应坚持广泛、规范地使用汉语。凡非必要之情形不说外国话、不用外国字。此乃天经地义!\n然则每当必要,亦不排斥采用外国之语言。不妨博世界之学问,养中国之精神。\n本人亦支持少数民族坚持采用自己民族的传统语言。仍须强调,凡中国人,皆应会用汉语、积极使用汉语,此乃中华各民族之大一统之必由。'
|
@@ -52,9 +52,9 @@ window.atBeginingShouldExpandTOCWhenWindowIsWideEnough = false
|
|
52
52
|
console.log(
|
53
53
|
`\n${
|
54
54
|
printDoubleLine
|
55
|
-
}\n\n${
|
55
|
+
}\n\n%c${
|
56
56
|
welcomeZhHansCN
|
57
|
-
}\n( ${
|
57
|
+
}%c\n( ${
|
58
58
|
welcomeEn
|
59
59
|
} )\n\n${
|
60
60
|
' '.repeat(fullWidth - emailAddress.length)
|
@@ -74,7 +74,22 @@ window.atBeginingShouldExpandTOCWhenWindowIsWideEnough = false
|
|
74
74
|
wordLines.join('\n')
|
75
75
|
}\n\n${
|
76
76
|
printDoubleLine
|
77
|
-
}\n\n\n
|
77
|
+
}\n\n\n`,
|
78
|
+
|
79
|
+
[
|
80
|
+
'font-family: sans-serif;',
|
81
|
+
'font-size: 1.25em;',
|
82
|
+
'display: inline-block;',
|
83
|
+
'vertical-align: baseline;',
|
84
|
+
'color: #000;',
|
85
|
+
'text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.51);',
|
86
|
+
'background-color: #ffe0be;',
|
87
|
+
'border-radius: 3px;',
|
88
|
+
'margin: 0.5em 0;',
|
89
|
+
'padding: 0.5em 1em 0.5em 1.5em;',
|
90
|
+
].join(''),
|
91
|
+
|
92
|
+
null
|
78
93
|
)
|
79
94
|
|
80
95
|
const cssClassNameTOCExists = 'markdown-article-toc-exists'
|