add markdown表格语法格式化

liuyueyi · Jul 7, 2022 · 3d01fe9 · 3d01fe9
1 parent 8afd17f
commit 3d01fe9
Show file tree

Hide file tree

Showing 8 changed files with 345 additions and 83 deletions.
diff --git a/README.md b/README.md
diff --git a/assets/fonts/iconfont/iconfont.js b/assets/fonts/iconfont/iconfont.js
diff --git a/history.md b/history.md
@@ -13,6 +13,7 @@
 
 - 新增sitemap站点地图生成小工具 [sitemap](https://tool.hhui.top/tools/devops/sitemap)
 - 表格数据格式化，支持转markdown [table format](https://tool.hhui.top/tools/text/table_format/)
+- markdown表格语法格式化 [markdown format](https://tool.hhui.top/tools/code/mdFormat/)
 
 **2022.07.03**
 

diff --git a/pages/tools/code/mdformat.vue b/pages/tools/code/mdformat.vue
@@ -0,0 +1,75 @@
+<template>
+    <div class="markdown-format">
+        <nya-container title="markdown表格格式化">
+            <nya-input v-model="content"
+                       class="top-margin-1em"
+                       fullwidth
+                       rows="5"
+                       type="textarea"
+                       autofocus
+                       label="请输入markdown语法表格"
+            />
+        </nya-container>
+
+        <nya-container v-if="results" title="格式化输出">
+            <nya-copy :copy="results">
+                <pre>{{ results }}</pre>
+            </nya-copy>
+        </nya-container>
+
+        <nya-foot-info title="Tips">
+            <li> 让markdown的表格代码更好看</li>
+        </nya-foot-info>
+    </div>
+</template>
+
+<script>
+import Dynamic from '@/components/Dynamic';
+import {MarkdownTableFormatter} from "/static/js/mdFormat";
+
+export default {
+    name: 'sitemap',
+    components: {
+        Dynamic
+    },
+    data() {
+        return {
+            content: '',
+            results: '',
+        };
+    },
+    watch: {
+        content() {
+            this.format_table();
+        }
+    },
+    methods: {
+        format_table() {
+            if (this.content) {
+                let ans = "";
+                try {
+                    let mtf = new MarkdownTableFormatter();
+                    mtf.format_table(this.content)
+                    ans = mtf.output_table;
+                } catch (e) {
+                }
+                if (ans) {
+                    this.results = ans;
+                } else {
+                    this.results = "";
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.markdown-format {
+    pre {
+        font-family: sans-serif;
+    }
+
+}
+
+</style>
diff --git a/static/js/mdFormat.js b/static/js/mdFormat.js
@@ -0,0 +1,168 @@
+function MarkdownTableFormatter() {
+
+    // Setup instance variables.
+    this.cells = new Array();
+    this.column_widths = new Array();
+    this.output_table = "";
+
+}
+
+function getWidth(str) {
+    var l = str.length;
+    var blen = 0;
+    for (let i = 0; i < l; i++) {
+        if ((str.charCodeAt(i) & 0xff00) != 0) {
+            blen++;
+        }
+        blen++;
+    }
+    return blen;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
+MarkdownTableFormatter.prototype.add_missing_cell_columns = function () {
+    for (var row_i = 0, row_l = this.cells.length; row_i < row_l; row_i = row_i + 1) {
+        for (var col_i = 0, col_l = this.column_widths.length; col_i < col_l; col_i = col_i + 1) {
+            if (typeof this.cells[row_i][col_i] === 'undefined') {
+                this.cells[row_i][col_i] = '';
+            }
+        }
+    }
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+
+MarkdownTableFormatter.prototype.format_table = function (table) {
+
+    this.import_table(table);
+    this.get_column_widths();
+    this.add_missing_cell_columns();
+    this.pad_cells_for_output();
+
+    // Header
+    this.output_table = "| ";
+    this.output_table += this.cells[0].join(" | ");
+    this.output_table += " |\n";
+
+    // Separator
+    this.output_table += "|-";
+    this.output_table += this.cells[1].join("-|-");
+    this.output_table += "-|\n";
+
+
+    for (var row_i = 2, row_l = this.cells.length; row_i < row_l; row_i = row_i + 1) {
+        this.output_table += "| ";
+        this.output_table += this.cells[row_i].join(" | ");
+        this.output_table += " |\n";
+    }
+
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+
+MarkdownTableFormatter.prototype.get_column_widths = function () {
+
+    this.column_widths = new Array();
+
+    for (var row_i = 0, row_l = this.cells.length; row_i < row_l; row_i = row_i + 1) {
+        for (var col_i = 0, col_l = this.cells[row_i].length; col_i < col_l; col_i = col_i + 1) {
+            if (typeof this.column_widths[col_i] === 'undefined') {
+                this.column_widths[col_i] = getWidth(this.cells[row_i][col_i]);
+            } else if (this.column_widths[col_i] < getWidth(this.cells[row_i][col_i])) {
+                this.column_widths[col_i] = getWidth(this.cells[row_i][col_i]);
+            }
+        }
+    }
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+
+MarkdownTableFormatter.prototype.import_table = function (table) {
+
+    var table_rows = table.split("\n");
+
+    // Remove leading empty lines
+    while (table_rows[0].indexOf('|') == -1) {
+        table_rows.shift();
+    }
+
+    for (var row_i = 0, row_l = table_rows.length; row_i < row_l; row_i = row_i + 1) {
+
+        // TODO: Set up the indexes so that empty lines at either the top or bottom will
+        // be removed. Right now, this is only helpful for empty lines at the bottom.
+        if (table_rows[row_i].indexOf('|') == -1) {
+            continue;
+        }
+
+        this.cells[row_i] = new Array();
+
+        var row_columns = table_rows[row_i].split("\|");
+
+        for (var col_i = 0, col_l = row_columns.length; col_i < col_l; col_i = col_i + 1) {
+            this.cells[row_i][col_i] = row_columns[col_i]
+            this.cells[row_i][col_i] = this.cells[row_i][col_i].replace(/^\s+/g, "");
+            this.cells[row_i][col_i] = this.cells[row_i][col_i].replace(/\s+$/g, "");
+
+            // If it's the separator row, parse down the dashes
+            // Only do this if it matches to avoid adding a
+            // dash in an empty column and messing with the column widths.
+            if (row_i == 1) {
+                this.cells[row_i][col_i] = this.cells[row_i][col_i].replace(/-+/g, "-");
+            }
+        }
+    }
+
+
+    // Remove leading and trailing rows if they are empty.
+    this.get_column_widths();
+
+    if (this.column_widths[0] == 0) {
+        for (var row_i = 0, row_l = this.cells.length; row_i < row_l; row_i = row_i + 1) {
+            this.cells[row_i].shift();
+        }
+    }
+
+    this.get_column_widths();
+
+    // check to see if the last item in column widths is empty
+    if (this.column_widths[(this.column_widths.length - 1)] == 0) {
+        for (var row_i = 0, row_l = this.cells.length; row_i < row_l; row_i = row_i + 1) {
+            // Only remove the row if it is in the proper last slot.
+            if (this.cells[row_i].length == this.column_widths.length) {
+                this.cells[row_i].pop();
+            }
+        }
+    }
+
+    this.get_column_widths();
+
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
+MarkdownTableFormatter.prototype.pad_cells_for_output = function () {
+
+    for (var row_i = 0, row_l = this.cells.length; row_i < row_l; row_i = row_i + 1) {
+        for (var col_i = 0, col_l = this.cells[row_i].length; col_i < col_l; col_i = col_i + 1) {
+
+            // Handle anything that's not the separator row
+            if (row_i != 1) {
+                while (getWidth(this.cells[row_i][col_i]) < this.column_widths[col_i]) {
+                    this.cells[row_i][col_i] += " ";
+                }
+            }
+            // Handle the separator row.
+            else {
+                while (getWidth(this.cells[row_i][col_i]) < this.column_widths[col_i]) {
+                    this.cells[row_i][col_i] += "-";
+                }
+            }
+        }
+    }
+}
+
+export {MarkdownTableFormatter}
diff --git a/static/sitemap.xml b/static/sitemap.xml
@@ -271,4 +271,8 @@
         <loc>https://tool.hhui.top/setting</loc>
         <lastmod>2022-07-07</lastmod>
     </url>
+    <url>
+        <loc>https://tool.hhui.top/tools/code/mdFormat</loc>
+        <lastmod>2022-07-07</lastmod>
+    </url>
 </urlset>
diff --git a/static/urls.txt b/static/urls.txt
@@ -66,3 +66,4 @@ https://tool.hhui.top/tools/other/chinese_id
 https://tool.hhui.top/nav
 https://tool.hhui.top/favorite
 https://tool.hhui.top/setting
+https://tool.hhui.top/tools/code/mdFormat
diff --git a/store/tools.js b/store/tools.js
@@ -398,6 +398,17 @@ export const state = () => {
                         description: '在线时间戳转换|格式化工具'
                     }
                 },
+                {
+                    name: 'Markdown表格格式化',
+                    search_keys: "markdown table format",
+                    icon: '#icon-format',
+                    path: '/tools/code/mdFormat',
+                    recommend: true,
+                    head: {
+                        keywords: ['markdown', '表格', "格式化", "表格数据格式化"],
+                        description: 'markdown 表格数据格式化'
+                    }
+                },
                 {
                     name: 'HTTP解析',
                     search_keys: 'http parse',