Merge branch 'table-container' of https://github.com/scarsu/markdown-…

…nice into scarsu-table-container
gentoolin · Jul 1, 2020 · 5fca711 · 5fca711
2 parents 5af7d63 + 7de6e47
commit 5fca711
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 1 deletion.
diff --git a/src/template/basic.js b/src/template/basic.js
@@ -227,6 +227,12 @@ export default `/*默认样式，最佳实践*/
   font-size: 14px;
 }
 
+
+/*表格容器 */
+#nice .table-container{
+  overflow-x: auto;
+}
+
 /*表格*/
 #nice table {
   display: table;
@@ -259,6 +265,12 @@ export default `/*默认样式，最佳实践*/
   background-color: #f0f0f0;
 }
 
+/* 表格最小列宽4个汉字 */
+#nice table tr th:nth-of-type(n),
+#nice table tr td:nth-of-type(n){
+  min-width:85px;
+}
+
 /* 微信代码块 */
 #nice .code-snippet__fix {
   word-wrap: break-word !important;

diff --git a/src/template/content.md b/src/template/content.md
@@ -111,6 +111,14 @@
 | 小小勇敢 |  20  | 爬棵勇敢树 |
 | 小小小机智 |  22  | 看一本机智书 |
 
+宽度过长的表格可以滚动：
+
+| 姓名   | 年龄 |     工作 |-|-|-|-|
+| :----- | :--: | -------: |:-: |:-: |:-: |:-: |
+| 小可爱 |  18  | 吃可爱多 |-|-|-|-|
+| 小小勇敢 |  20  | 爬棵勇敢树 |-|-|-|-|
+| 小小小机智 |  22  | 看一本机智书 |-|-|-|-|
+
 ### 3.10 图片
 
 插入图片，如果是行内图片则无图例，否则有图例，格式如下：
@@ -285,4 +293,4 @@ Markdown Nice 这么好用，简直是{喜大普奔|hē hē hē hē}呀！
 
 ### 5.3 更多文档
 
-更多文档请参考 [markdown-nice-docs](https://preview.mdnice.com/articles/ "更多文档")
+更多文档请参考 [markdown-nice-docs](https://preview.mdnice.com/articles/ "更多文档")
diff --git a/src/template/markdown/custom.js b/src/template/markdown/custom.js
@@ -156,6 +156,14 @@ export default `/* 自定义样式，实时生效，浏览器实时缓存 */
 #nice table tr td {
 }
 
+/* 
+ * 表格列宽控制
+ * 最小列宽 min-width: 85px;
+*/
+#nice table tr th:nth-of-type(n),
+#nice table tr td:nth-of-type(n){
+}
+
 /* 脚注文字 */
 #nice .footnote-word {
 }

diff --git a/src/template/markdown/normal.js b/src/template/markdown/normal.js
@@ -158,6 +158,14 @@ export default `/* 全局属性
 #nice table tr td {
 }
 
+/* 
+ * 表格列宽控制
+ * 最小列宽 min-width: 85px;
+*/
+#nice table tr th:nth-of-type(n),
+#nice table tr td:nth-of-type(n){
+}
+
 /* 脚注文字 */
 #nice .footnote-word {
 }

diff --git a/src/utils/helper.js b/src/utils/helper.js
@@ -8,6 +8,7 @@ import markdownItRuby from "markdown-it-ruby";
 import markdownItImsize from "markdown-it-imsize";
 
 import markdownItSpan from "./markdown-it-span";
+import markdownItTableContainer from "./markdown-it-table-container";
 import markdownItRemovepre from "./markdown-it-removepre";
 import markdownItLinkfoot from "./markdown-it-linkfoot";
 import markdownItImageFlow from "./markdown-it-imageflow";
@@ -81,6 +82,7 @@ export const markdownParserWechat = new MarkdownIt({
 
 markdownParserWechat
   .use(markdownItSpan) // 在标题标签中添加span
+  .use(markdownItTableContainer) // 在表格外部添加容器
   .use(markdownItRemovepre) // 移除代码段中的 pre code
   .use(markdownItMath) // 数学公式
   .use(markdownItLinkfoot) // 修改脚注
@@ -122,6 +124,7 @@ export const markdownParser = new MarkdownIt({
 
 markdownParser
   .use(markdownItSpan) // 在标题标签中添加span
+  .use(markdownItTableContainer) // 在表格外部添加容器
   .use(markdownItMath) // 数学公式
   .use(markdownItLinkfoot) // 修改脚注
   .use(markdownItTableOfContents, {

diff --git a/src/utils/markdown-it-table-container.js b/src/utils/markdown-it-table-container.js
@@ -0,0 +1,26 @@
+function makeRule() {
+  return function addTableContainer(state) {
+    var arr = [];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var curToken = state.tokens[i];
+      if (curToken.type === "table_open") {
+        var tableContainerStart = new state.Token("html_inline", "", 0);
+        tableContainerStart.content = `<figure class="table-container">`;
+        arr.push(tableContainerStart);
+        arr.push(curToken);
+      } else if (curToken.type === "table_close") {
+        var tableContainerClose = new state.Token("html_inline", "", 0);
+        tableContainerClose.content = `</figure>`;
+        arr.push(curToken);
+        arr.push(tableContainerClose);
+      } else {
+        arr.push(curToken);
+      }
+    }
+    state.tokens = arr;
+  };
+}
+
+export default (md) => {
+  md.core.ruler.push("table-container", makeRule(md));
+};