csv2md2html

by s_yoshiki

HTML

<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div class="ui equal width aligned padded grid fullheight" id="app">
    <div class="two column ui form">
        <div class="field">
            <label>csv</label>
            <textarea v-model="csv" @input="changeCsv">{{ csv }}</textarea>

            <label>markdown</label>
            <textarea v-model="md" @input="changeMd">{{ md }}</textarea>

            <label>html</label>
            <textarea v-model="html" @input="changeHtml">{{ html }}</textarea>

            <hr>
            <div class="ui form right aligned">
                <button class="ui button primary big" @click="compile">run</button>
            </div>


        </div>
    </div>
    <div class="two column">
        <label>debug</label>
        <div v-html="debug"></div>
    </div>
</div>

CSS

/*
html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

#editor {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.fullheight {
    height: 100%;
}

*/

JavaScript

function csv2md(src, opt) {
    var del = ","
    var eol = "\n"

    var dst = ""

    src = src.split(eol).map(e => e.split(del))

    if (src.length < 2) {
        return ""
    }

    for (var i = 0; i < src.length; i++) {
        if (i === 1) {
            dst += "|"
            for (var j = 0; j < src[0].length; j++) {
                dst += "---|"
            }
            dst += eol
        }
        var tmp = ""
        tmp = src[i].join("|")
        tmp = "|" + tmp + "|"
        dst += tmp + eol

    }
    return dst
}

function extendHtmlTable(src) {
    src = src.split("<table>").join("<table class=\"ui celled table\">")
    return src
}

var app = new Vue({
    el: '#app',
    data: {
        csv: '',
        md: "",
        html: "",
        debug: ""
    },
    methods: {
        compile() {
            this.md = csv2md(this.csv)
            this.html = marked("\n" + this.md, {
                sanitize: true
            })
            this.debug = extendHtmlTable(this.html)
        },
        changeCsv: function() {
            this.compile()
        },
        changeMd: function() {
            this.html = marked("\n" + this.md, {
                sanitize: true
            })
            this.debug = extendHtmlTable(this.html)
        },
        changeHtml: function() {
            this.debug = extendHtmlTable(this.html)
        }
    }
})