質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.11%

prettifyにワンクリックコピーボタンを付けたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 229

score 10

前提・実現したいこと

「pre code」にprettifyを導入して、既存のコピーボタンも動くようにしたいです。
今のままだとソースコードの一部しかコピーできません。コード全体をコピーするためにはどうしたらよいか、煮詰まっているのでお助けください。

エラーメッセージ

特になし

該当のソースコード

// code
$(function(){
    $("body").on("click",".code-copy",function(e){
        var textElem = $(this).parents("pre code").find("li");
        window.getSelection().selectAllChildren(textElem[0]);
        document.execCommand("copy");
        $(this).addClass("precopy-active");
        $(this).delay(2000).queue(function() {
            $(this).removeClass("precopy-active").dequeue();
        });
    });
});
<head>
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
</head>

<pre><code class="prettyprint linenums lang-css" data-code="CSS" data-icon="&#xe86a;"><span class="lnr lnr-file-add"></span><div class="code-copy"><span class="precopy-text"> </span></div>/* ruby */
[data-ruby] {
    display: inline-block;
    position: relative;
}
</code></pre>
<!-- 省略 -->
<script src="../assets/js/prettify.js"></script>
<script>prettyPrint();</script>
/* コード */
code {
    border: none;
    font-family: 'Source Sans Pro','Noto Sans JP', sans-serif !important;
    margin: 0 0.25rem;
    padding: 0.25rem 0.65rem;
    border: solid 1px #eeeeee;
    color: var(--dark);
}
pre {
    position: relative;
    width :100% !important;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    text-align: left;
    margin: .9rem 0;
}
pre code {
    width: 100% !important;
    overflow-x: auto;
    display: block;
    position: relative;
    padding: 3rem 1.5rem .5rem;
    font-weight: 400;
    box-sizing: border-box !important;
}
pre code em {
    font-style: normal;
    background-color: #424242;
    display: inline-block;
    width: 100%;
}
pre code::before,
pre code::after,
.code-copy,
pre code .lnr {
    display: block;
    position: absolute;
    padding: 0 1rem;
    font-size: 1.02rem;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    color: #fff;
}
pre code::before {
    content: attr(data-code);
    top: 0;
    width: 100%;
    margin:0 -1.5rem 0;
    padding: 0 1rem 0 2.8rem;
    background: rgba(157, 171, 192, .7);
}
pre code::after,
pre code .lnr {
    font-size: 1.1rem;
}
pre code::after {
    content: attr(data-icon);
    font-family: Linearicons-Free;
    speak: none;
    font-style: normal;
    font-weight: 500;
    font-variant: normal;
    text-transform: none;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: 0;
    left: 0;
}
pre code .lnr {
    line-height: inherit !important;
    top: 0;
    right: calc(48px);
    width: auto;
    padding: 0 .5rem;
    font-weight: 400;
    font-family: 'Linearicons-Free';
    z-index: 1;
}
.code-copy {
    text-align: center;
    top: 0;
    right: 0;
    margin: 0;
    width: 80px;
    cursor: pointer;
    overflow: hidden;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    background: rgba(184, 157, 191, .7);
    z-index: 0;
}
.code-copy .precopy-text::before,
.code-copy:before,
.code-copy .precopy-text {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
.code-copy .precopy-text::before,
.code-copy:before {
    position: absolute;
}
.code-copy .precopy-text::before {
    right: -10%;
    width: 100%;
    content: 'copy';
}
.code-copy::before {
    right: -100%;
    width: 100%;
    content: "copied";
}
.precopy-active{
    background: #9c9c9c;
}
.precopy-active:before {
    right: -10%;
}
.precopy-active .precopy-text::before {
    -webkit-transform: translateX(300%);
    -moz-transform: translateX(300%);
    -ms-transform: translateX(300%);
    transform: translateX(300%);
    right: -100%;
}

/*-----------------------------------------------------------------------------
prettify
------------------------------------------------------------------------------*/

/**
* @license
* Copyright (C) 2015 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*      http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/* Pretty printing styles. Used with prettify.js. */

.prettyprint {
    background: #fff;
    border: 1px solid #eee !important;
    padding-left: 3rem;
    padding-right: 0;
}

.pln {
    color: #333;
}

@media screen {
    /* string content */
    .str {
        color: #d14;
    }

    /* keyword */
    .kwd {
        color: #333;
    }

    /* comment */
    .com {
        color: #998;
    }

    /* type name */
    .typ {
        color: #458;
    }

    /* literal value */
    .lit {
        color: #458;
    }

    /* punctuation */
    .pun {
        color: #333;
    }

    /* lisp open bracket */
    .opn {
        color: #333;
    }

    /* lisp close bracket */
    .clo {
        color: #333;
    }

    /* markup tag name */
    .tag {
        color: #000080;
    }

    /* markup attribute name */
    .atn {
        color: #008080;
    }

    /* markup attribute value */
    .atv {
        color: #d14;
    }

    /* declaration */
    .dec {
        color: #333;
    }

    /* variable name */
    .var {
        color: #008080;
    }

    /* function name */
    .fun {
        color: #900;
    }
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: .7rem;
    color: #cccccc;
}
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
    padding-left: 1rem;
    background-color: #fff;
    list-style-type: decimal-leading-zero;
    margin-right: -1rem;
}
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #f7f7f7 }

/*-----------------------------------------------------------------------------

------------------------------------------------------------------------------*/

試したこと

色々調べて eachを使えばいいのかも考えたのですが、良くわかりませんでした。

補足情報(FW/ツールのバージョンなど)

Firefox最新バージョン、Safari 604.1

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/10/10 17:28

    >色々調べて eachを使えばいいのかも考えたのですが
    何を調べてどこまで考えたのか分かりませんが、組んでみないとわかるものもわかるようにはならないかと思います。
    何も試してませんか?

    キャンセル

  • erp

    2020/10/10 17:36

    .each( function( index, element ) {}の中をどう書くのだろう...というところで止まってしまいました。現在のコードが一番得たい形に近いものです。

    キャンセル

回答 1

checkベストアンサー

0

こんばんは。

$('code')[0].innerTextでいいと思います。

サンプル


参考:

ノードとその子孫の「レンダリングされた」テキスト内容を示します。
HTMLElement.innerText - Web API | MDN

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/10/11 07:58

    レンダリングされたテキストを表示する方法があったのですね。勉強になりました。
    複数のコードを同ページ内に設置したかったので、いただいたソースを
    $(this).parents("code")
    に変更したところ、思うような結果が得られました。本当にありがとうございます。大変助かりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.11%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る