WordPressでBashのコマンドを＄ありで表示してコマンドだけをコピーする

wordpress
2024.08.26

1. Codeを表示するプラグイン

　Wordpressではいろいろなプラグインが公開されています。

　ソースコードをきれいに表示し、簡単にコピーできるようにするプラグインはたくさんあります。

Highlighting Code Block
prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。 (Gutenberg とクラシックエディター共に利用可能)
ja.wordpress.org
Code Block Pro – Beautiful Syntax Highlighting
Code highlighting powered by the VS Code engine. Performance focused. No bloat.
ja.wordpress.org

2. プロンプトを表示させたいがコピーしたくない

　ただ、Bashのコードを書く時には、たとえば

$ls -l

のように先頭にプロンプトの「＄」を記載したいものです。

　ただし、コピーする際にはこの「＄」はコピーしたくない。

　そんなわがままにトライしてみました。

　結果は以下のようになりました。

$ls -l

3. 追加したコード

3.1. functions.phpにコードを追加

　まず最初にfunctions.phpに以下のコードを追加しました。

PHP
function enqueue_custom_scripts() {
    wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), null, true);
    wp_enqueue_style('custom-css', get_stylesheet_directory_uri() . '/css/custom.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

custom-jsとして/js/custom.jsを、custom-cssとして/css/custom.cssを追加する宣言です。

3.2. 新規にcustom.jsを追加

　次に、custom.jsです。

JavaScript
document.addEventListener('DOMContentLoaded', function() {
    var copyBtns = document.querySelectorAll('.copy-btn');

    copyBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var copyText = btn.previousElementSibling.querySelector('.copy-text').textContent;
            var textarea = document.createElement('textarea');
            textarea.style.position = 'absolute';
            textarea.style.left = '-9999px';
            textarea.value = copyText;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            alert('コピーしました！');
        });
    });
});

　これは、先の記述のとおり/js/custom.jsとして保存します。

3.3. 新規にcustom.cssを追加

　次にcustom.cssです。

CSS
.code-container {
    position: relative;
    background-color: #1e1e1e;
    padding: 15px;
    border-radius: 5px;
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
}

.copy-text {
    background-color: #3e3e3e;
    padding: 2px 5px;
    border-radius: 3px;
}

.copy-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
}

.copy-btn:hover {
    background-color: #45a049;
}

.code-container pre {
    color: #a0a0a0;  /* これにより、$の色が明るくなります */
}

　これも先の記述どおり、/css/custom.cssとして保存します。

3.4. 投稿本文にカスタムHTMLとして追加

　ここまでできたら投稿本文内にカスタムHTMLブロックを追加し、以下のコードを記載します。

HTML
<div class="code-container">
    <pre>$<span class="copy-text">ls -l</span></pre>
    <button class="copy-btn">Copy code</button>
</div>

　すると以下のように表示されます。

$ls -l

　上記HTMLの「ls -l 」の部分を他のコマンドに書き換えればいろんなコマンドを表示してコピーできるようになります。

　色合いを変えたい場合は、CSSを調整してください。

　

タイトルとURLをコピーしました