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

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

ただいまの
回答率

89.08%

highlight.jsが動作せず、ハイライトされない

受付中

回答 0

投稿 編集

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

hilhilyzyan

score 19

環境

  • mac book

  • Laravel 5.7

  • Docker  & docker-compose

  • boorstrap 3.3.7

  • Bootstrap 4.0.0

  • jQuery 1.12.4

  • jQuery 3.2

  • marked.js 0.6.0

  • highlight.js 9.13.1

実現したいこと

リアルタイムでhtmlに変換される反映されるマークダウンエディタを作っています。(qiitaやteratailみたいな)

 起こっている問題

プレビュー画面にマークダウンがhtmlに変換されるものがリアルタイムで反映されますが、
シンタックスハイライトがされていない。

コード

<head>
    <!-- Bootstrap CSS  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
</head>
<body>
.
.
.
    <div class="col-md-6">
        <textarea name="question-content" id="question-content"></textarea>
    </div>
    <div class="col-md-6">
        <div id="question-content-preview"></div>
    </div>

.
.
.
.

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
   </script>
    <!-- Bootstrap JavaScript-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
   </script>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
import marked from 'marked';
import hljs from 'highlight.js';

$(function() {

    marked.setOptions({
        langPrefix: ''
    });

    $('#question-content').keyup(function() {
        var html = marked($(this).val());
        $('#question-content-preview').html(html);

        // シンタックスハイライト
        $('#question-content-preview pre code').each(function(i, block) {
            hljs.highlightBlock(block, block.className);
        });
    });
});

試したこと

$('#question-content-preview pre code').each(function(i, block) {
    conole.log('IN!');
    console.log(block);
    console.log(block.className);
    hljs.highlightBlock(block, block.className); 
});
// バッククォーとを入れるとコードブロックになるので、...で代用しています
...php
<?php echo $aaa ?>
...

出力結果は

IN! //1こめ
<code class="php hljs">
    <span class="hljs-meta">&lt;?php</span>
    <span class="hljs-keyword">echo</span> $aaa ; 
    <span class="hljs-meta">?&gt;</span>
</code> // 2こめ
php // 3こめ

シンタックスハイライトをさせるには、どのようにしたらいいか、ご教示お願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • m.ts10806

    2019/01/30 14:01

    Laravelのapp.jsってjQuery包括していたような。
    バッティングしてませんかね。バージョン。

    キャンセル

  • hilhilyzyan

    2019/01/31 12:04

    jQueryとBootstrapの表記を削除してみました。が、変わりません。むしろmarkedのコードブロックで背景が灰色にならなくなりました...
    (以下、3点削除)

    ```
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    .
    .

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    </script>
    <!-- Bootstrap JavaScript-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    ```

    キャンセル

  • hilhilyzyan

    2019/01/31 12:20

    > むしろmarkedのコードブロックで背景が灰色にならなくなりました...

    これに関しては、<pre>にcssをつければいけるので、なんとかなります!

    キャンセル

まだ回答がついていません

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

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

関連した質問

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