bloggerのコード表示をprettyprint → highlight.jsへ変更しました

𖧷 prettyprint


今ままではprettyprintを使っていて、こんな感じでした↓ 
console.log("Hello, World!");
これは、

① Blogger管理画面に行く

② 適用されているテーマのHTMLの編集


③ <head>直下に
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst">
を入れて保存し、HTMLビューで
<pre class="prettyprint lang-js">コード内容</pre>
と記述することで実装していました。


𖧷 highlight.js

これを今回、以下のように変更。

console.log("Hello, World!");
上記の③のところで、</head>の直前に 

  <link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css' rel='stylesheet'/>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js'/>
  <script>hljs.highlightAll();</script>
  
  <style>
  .code-container {
    position: relative;
    margin: 2em 0;
    padding: 0;
    line-height: 1;
    font-size: 15px;
    background: #F7F7F7 !important;
    border-radius: 4px;
    overflow: auto;
  }

  pre code,
  pre code.hljs {
    display: block;
    margin: 0;
    padding: 2em 1em 1em;
    line-height: 1.4;
    overflow: auto;
    color: #111 !important;
    background: #F7F7F7 !important;
  }
    
  .copy-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 10px;
    background-color: #444;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #fff;
    transition: background-color 0.3s ease;
  }

  .copy-button:hover {
    background-color: #666;
  }
</style>
を、</body>の直前に

<script> //<![CDATA[
  document.addEventListener("DOMContentLoaded", function() {
            const codeBlocks = document.querySelectorAll("pre code");


            codeBlocks.forEach(function(codeBlock) {
                const codeContainer = document.createElement("div");
                codeContainer.className = "code-container";


                codeBlock.parentNode.insertBefore(codeContainer, codeBlock);
                codeContainer.appendChild(codeBlock);


                const copyButton = document.createElement("button");
                copyButton.textContent = "Copy";
                copyButton.className = "copy-button";


                codeContainer.appendChild(copyButton);


                copyButton.addEventListener("click", function() {
                    const codeText = codeBlock.textContent;
                    const tempTextArea = document.createElement("textarea");
                    tempTextArea.value = codeText;
                    document.body.appendChild(tempTextArea);
                    tempTextArea.select();
                    document.execCommand("copy");
                    document.body.removeChild(tempTextArea);


                    copyButton.textContent = "Copied!";
                    setTimeout(function() {
                        copyButton.textContent = "Copy";
                    }, 2000);
                });
            });
        });
//]]>
を入れて保存し、HTMLビューで
<pre><code class="language-javascript">コード内容</code></pre>
のように記述することで実装しました。


---------------------
※参考ページ：https://lifetechia.com/blogger-code-formatting-copy/#toc10

コメント

コメントを投稿

このブログの人気の投稿

旧バージョンのiMovieを入れる方法

イメージ
iMovie ver 10って、テキストのフェードインフェードアウトが調整できないんですよね。 ver 9にしたいなあ。 と思ったら、なかなかダウングレードする方法が見つからない。 最終的に、以下の方法でうまくいきました。 （環境：mac OS X El Capitan 10.11.6） １、アップル公式サイトからupgradeのためのpkgファイルをダウンロード 私の時はURLは https://support.apple.com/en_US/downloads/imovie でした。 飛べない場合は公式サイトに一旦行ってから、imovieで検索すると良いかもしれません。 ２、デスクトップなどに「iMovie」というフォルダを作る（右クリックから新規フォルダで作れます） ３、「ターミナル」アプリを開く ４、ターミナルで「pkgutil --expand」と打った後、半角スペースを空けて、１でDLしたpkgをドラッグ＆ドロップ。さらに、２で作ったiMovieフォルダも続けてドラッグ＆ドロップし、間を空けずに続きに「/iMovie」と書き込んで、enterキーを押して実行する（数分かかります） ５、２のiMovieフォルダの中にさらにiMovieフォルダができ、その中に 「Distribution」 「iMovie***Update.pkg」 「Resources」 ができます。 ６、５でできたpkgを、そのまま開くのではなく、右クリックして「パッケージの内容を表示」します。 「PackageInfo」 「Payload」 「Scripts」 などがあるはず。 ７、「Payload」を「Payload.zip」にリネーム（拡張子変更）します。できたらダブルクリックなどでzipを解凍（数分かかります）。 解凍に成功した場合、「Payload 2」というフォルダができます。 （解凍に成功しなかった場合も、ゴミ箱に移して完全に消去した後再度試してみてください。） ８、「Payload 2」の中には 「Applications」 「private」 とあると思いますが、「Applications」を開くと「iMovie」がいます。 ９、２で作ったiMovieフォルダをまるっとアプリケーションフォルダに移し、８で見つけた「iMovie」をアプリケーションフォルダにコピーすれ...
続きを読む

TWRP公式サポートされてないAndroid端末でシステムインストールした話

イメージ
TWRPはandroidのroot化に関連して注目されることが多いですね。 公式サポートされてないだけで地獄と化すことを私は知りませんでした。 以下は丸４日に渡る私の悪戦苦闘の記録です。あくまで参考程度に、このような操作は自己責任で行ってください。 （バックアップはあらかじめ取っておこう。特にブートローダーをアンロックしてない場合は初期化不可避。） ---------------------------スポンサー--------------------------- -------------------------------------------------------------------- ちなみに私が今回使用したのはASUS Zenfone Live (L1)。新品でも１万円代で、とても良い仕事をしてくれるけれど、TWRP公式サポートしてない機種です。 システムインストールは、要するにユーザーアプリを/system以下に入れれば良い（システムをいじって動かなくしてしまったりセキュリティ上信頼できないアプリを入れるのを防ぐため、普段はロックがかかっています）から、流れとしては、 １、PCに adb・fastboot を導入しておく （リンク先はwindows用。macの場合android studioアプリをインストールし、パスをターミナルアプリのコマンドラインから export PATH=$PATH:/Users/<自分のユーザー名のフォルダ>/Library/Android/sdk/platform-tools することでadbが入る） ２、ブートローダーのアンロック ３、TWRPをrecoveryへ焼く（ちなみにTWRPの言語は設定から変更可能） ４、TWRPファイルマネージャーで/system以下へのファイル移動 の、つもりだった。実際どうだったかは以下の通り。 １、そのまま。DLしてきてディレクトリにパスを通す。検索すれば良い解説ページがたくさんある。 ２、 まずブートローダーのアンロックは避けられなかったです。 非公式の方法だとアンロック解除できる方法もあるらしいけど、自分は公式の方で行く。なぜなら変ないじり方されないだろうし安心だから。まあ当然サポートは切れるけど。 ASUS...
続きを読む

[UTAU] Garagebandで作ったボーカルメロディーをUTAUに読ませる

イメージ
UTAUにはメロディーとしてMIDIデータを読み込む機能がありますが、GaragebandそのものにはMIDIを吐き出す機能がありません。 以下の手順でMIDIに変換します。 ---------------------------スポンサー--------------------------- -------------------------------------------------------------------- （リージョンが飛んでいる場合）Garagebandのボーカルのトラックを選択して、編集＞リージョンを結合 ファイル＞リージョンをループライブラリに追加 → .aifファイルが、多分$HOME/Library/Audio/Apple\ Loops/User\ Loops/SingleFiles/らへんに吐き出される。 ターミナル（mac標準の黒いアイコンのコマンドアプリ）で open $HOME/Library/Audio/Apple\ Loops/User\ Loops/SingleFiles/とするとFinderで表示される。 GB2MIDIというフリーツールをダウンロードして開き、「run」もしくは「実行」をクリックし、さきほどの.aifファイルを投入   .midファイルができる（.aifと基本同じ場所）ので、UTAUからファイル＞インポートで読み込む  注：インポート後、一部の音がうまく読み込まれず消える場合があります。Garagebandの時点で音が重なっていたり、短すぎたりすると起こるような気がします。
続きを読む