記事に埋め込んだソースコードをダウンロードするボタンJavaScript(jQuery)

JavaScriptでHTMLのエレメントを動的に生成する機能の使い道を自分なりの考えてみました。

ソースコードを記事に埋め込むため「Highlighting Code Block」というプラグイン使っています。このプラグインを使ったソースコードのダウンロードボタンをJavascriptで試作してみます。

ソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>コードダウンロードボタン</title>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script>
            function codeDownload() {
                $('.prism').each(function(index, e) {
                    var filename = e.getAttribute('data-file');
                    var text = e.children[0].textContent;

                    var blob = new Blob([text], {type: "text/plain"});
                    var a = document.createElement("a");
                    a.href = URL.createObjectURL(blob);
                    a.target = '_blank';
                    a.download = filename;
                    a.click();
                });
            };
        </script>
        <style>
            .submitButton:hover {
                background-color: #7f7f7f;
                color: #ffffff;
            }
            .submitButton {
                padding: 8px;
                margin: 8px;
                border: 2px solid #000000;
                width: 120px;
                height: 48px;
                font-size: 24px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="hello.ps1" data-lang="Plain Text"><code>echo "Hello&lt;"</code></pre></div>
        <div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="hello2.ps1" data-lang="Plain Text"><code>echo "Hello2"</code></pre></div>
        <div class="submitButton" onclick="codeDownload();">Download</div>
    </body>
</html>

Download

Downloadボタンを押すとページ内のソースコードがhtmlファイルとしてダウンロードされるとおもいます。

内容としては、class名の.prismを探し、data-fileからファイル名を取得、ソースコードのテキスト部分からBlob(バイナリオブジェクト?)を作成しHTMLのリンク先としてセットして、それをクリックすることでダウンロードするようにしています。

ソースコードは単一のHTMLファイルとして作成していますが、wordpressの記事の場合、投稿ページの「カスタムJavaScrpit」と「カスタムcss」にJavaScript(script)とcss(style)をセットしています。

ソースコード

コメント