😄

Html及びMarkdownをImportするJavaScript

2022/02/08に公開

CSS

HTMLとマークダウンのImportの方法

importDocs.js

window.onload = async () => {
    await markdown.ready;
}

function logout(obj){
    //Chromeの場合
    alert(JSON.stringify(obj))
}

nothing = (value) => {
    return value
}

change = (value) => {
    return markdown.parse(value);
};

function __importDocs(aurl,tag,dt,fn)
{
    $(window).load(function() {
        $.ajax({
            url : aurl,
            dataType : dt,
            success : function(data){
                $('#'+tag).html(fn(data));
            },
            error: function(data){
                logout(data)
            }
        });
    });
}

function importHtml(aurl,tag){
    __importDocs(aurl,tag,'html',nothing);
}

function importMarkdown(aurl,tag){
    __importDocs(aurl,tag,'text',change)
}

次にインポートしたいimport.htmlを作成します。

import.html

<strong>ABC</strong>

次の例はマークダウンです。import.mdとして作成します。

index.md

## 今日のご飯は
- [ ] パン
- [ ] ご飯
- [x] うどん

次に本文を作成します

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Vakagey.com</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src='https://cdn.jsdelivr.net/gh/rsms/markdown-wasm@v1.1.2/dist/markdown.js'></script>
    <script src="./importDocs.js"></script>
</head>
<body>
    <div id="tag1"></div>
    <div id="tag2"></div>
    <script>
        importHtml("./import.html","tag1")
        importMarkdown("./index.md","tag2");
    </script>
</body>
</html>

HtmlとMarkdownがdiv id="tag1"とdiv id="tag2"のところでそれぞれ見ることができます。

注意

自分でサーバを繋いで確認する必要がある。

HTMLとマークダウンのImportの方法

注意

Discussion