環境

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に変換されるものがリアルタイムで反映されますが、
シンタックスハイライトがされていない。

コード

html
1<head>
2    <!-- Bootstrap CSS  -->
3    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
4    <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
5</head>
6<body>
7.
8.
9.
10    <div class="col-md-6">
11        <textarea name="question-content" id="question-content"></textarea>
12    </div>
13    <div class="col-md-6">
14        <div id="question-content-preview"></div>
15    </div>
16 
17.
18.
19.
20.
21
22    <!-- jQuery -->
23    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
24   </script>
25    <!-- Bootstrap JavaScript-->
26    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
27   </script>
28    <script src="{{ mix('js/app.js') }}"></script>
29</body>

JavaScript
1import marked from 'marked';
2import hljs from 'highlight.js';
3
4$(function() {
5
6    marked.setOptions({
7        langPrefix: ''
8    });
9
10    $('#question-content').keyup(function() {
11        var html = marked($(this).val());
12        $('#question-content-preview').html(html);
13
14        // シンタックスハイライト
15        $('#question-content-preview pre code').each(function(i, block) {
16            hljs.highlightBlock(block, block.className);
17        });
18    });
19});

試したこと

$('#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こめ

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

CHERRY

2019/01/30 03:57 編集

CSSが効いていないように見えますが、Webブラウザのデベロッパーツールで確認した場合、CSS は読み込まれていますか？

hilhilyzyan

2019/01/30 04:02

読み込まれています！ bootstrap.min.cssとapp.cssが200 OKになっています。画面のレイアウトはCSSでちゃんと整形されていて、 CSSをいじったらレイアウトが変わります。

m.ts10806

2019/01/30 04:58

タグは最大５つまでつけられるのでなるべく現状に関係するタグは沢山つけられたほうが的確な回答を得やすくなります。

m.ts10806

2019/01/30 05:01

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

hilhilyzyan

2019/01/31 03:04

jQueryとBootstrapの表記を削除してみました。が、変わりません。むしろmarkedのコードブロックで背景が灰色にならなくなりました... （以下、3点削除） ```  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> . .  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> ```

hilhilyzyan

2019/01/31 03:20

> むしろmarkedのコードブロックで背景が灰色にならなくなりました... これに関しては、<pre>にcssをつければいけるので、なんとかなります！