実現したいこと

markedのオプション設定でhighlightを差し込みたいのですが、
下はプレビューの一部ですが「"text"」の文字を赤で表示したい
const text = "text";
marked(text);

該当のソースコード

JavaScript
1//index.html
2<!DOCTYPE html>
3<html>
4<head>
5  <!-- Required meta tags -->
6  <meta charset="utf-8">
7  <title>コードシンタックスをハイライトしてみよう</title>
8
9  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.8.0/github-markdown.min.css">
10  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
11
12  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
13  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
14  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight/9.12.0/highlight.min.js"></script>
15
16  <link rel="stylesheet" href="./css/main.css">
17  <script src="./js/main.js"></script>
18</head>
19<body>
20
21  <div class="container">
22    <div class="editor">
23      <textarea class="textarea"></textarea>
24    </div>
25    <div class="preview markdown-body">
26    </div>
27  </div>
28
29</body>
30</html>
31
32// ./css/main.css
33body {
34  margin: 10px;
35  padding: 0;
36}
37
38.container {
39  width: 100vw;
40  height: 100%;
41  min-height: 100vh;
42  background-color: #F3c5c5;
43  display: flex;
44}
45
46.preview{
47  padding: 5px;
48  width: 50%;
49  background-color: #E5F0A0;
50  box-sizing: border-box;
51}
52
53.editor {
54  width: 50%;
55  background-color: #FCC4CC;
56  position: relative;
57}
58
59.editor .textarea {
60  position: absolute;
61  width: 100%;
62  height: 100%;
63  resize: none;
64  padding: 5px;
65  font-size: 16px;
66  box-sizing: border-box;
67  border: 0;
68  outline: 0;
69}
70
71.markdown-body p code{
72  color: #d14;
73}
74
75.markdown-body blockquote{
76  border-color: #8C618D;
77}
78
79// ./js/main.js
80"use strict";
81
82$(function () {
83  const $preview = $(".preview");
84
85  // markedのオプションを設定
86  marked.setOptions({
87    breaks: true,    // breaksを有効にすると、取消線が表示されるようになります。ま
88    sanitize: true, // sanitizeを有効にするとHTMLタグが入力された場合に、
89                    // ただのテキストとして出力します。
90    highlight: (code) => {
91       return hljs.highlightAuto(code).value;
92   },
93  });
94
95  // テキスト入力ハンドラ
96  $(".textarea").on("input", (e) => {
97
98    // 入力内容を取得する
99    const text = e.target.value;
100
101    // HTMLに変換する
102    const html = marked(text);
103
104    // プレビューに表示する
105    $preview.empty().append(html);
106
107  });
108
109  // -----------------------------------------------
110  // 初回表示に何かマークダウンを表示させるためのコード
111
112  const defaultText = `# heading1
113
114  このマークダウンエディタは\`marked\`というオープンソースのライブラリを利用しています。
115
116  - https://github.com/chjj/marked
117
118  ## heading2
119
120  markedの使い方は次の通りで、\`marked\`に変換したい文字列を渡します。
121
122  \`\`\`
123  const text = "text";
124  marked(text);
125  \`\`\`
126
127  > 作成者
128  > ![image](https://s3-ap-northeast-1.amazonaws.com/codeprep-migration/book/markdown-editor/codeprep.png)
129  > https://codeprep.jp`;
130
131  $("textarea").text(defaultText).trigger("input");
132
133});
134
135

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

// index.htmlの実行結果：Google-Chrome console

// 最初の画面図:code-syntax-highlight-stylesheet-read6-2.jpg
// 左の入力画面　　右のプレビュー画面

heading1 　　　heading1

このマークダウンエディタはmarkedというこのマークダウンエディタはmarkedというオープンソースの // marked:赤い文字
オープンソースのライブラリを利用しています。ライブラリを利用しています。

https://github.com/chjj/marked ● https://github.com/chjj/marked

heading2 　　　　　heading2

markedの使い方は次の通りで、markedに変換したい markedの使い方は次の通りで、markedに変換したい // marked:赤い文字
文字列を渡します。文字列を渡します。

const text = "text";                                                         const text = "text"; //color:black;
marked(text);                                                                 marked(text);//background;white

作成者　　　　作成者 (image）https://codeprep.jp
![image](https://s3-ap-northeast-1.amazonaws.com/

codeprep-migration/book/markdown-editor/codeprep.png)

https://codeprep.jp

//上のプレビューでconst text = "text"; //color:black;をconst text = "text"; //color:red;にしたい。

補足

windows10,vscodeのport5500を使用して、google chromeで表示しています。
勉強中のサイトは以下です。
https://codeprep.jp/books/88/chapters/6/sections/3

juner

2024/08/01 05:46 編集

試しに動かしてみましたが、 https://cdnjs.cloudflare.com/ajax/libs/highlight/9.12.0/highlight.min.js が 404 なので hljs が not define だからその処理でエラーになっているだけではないでしょうか？ https://livecodes.io/?x=id/5p5mh2nybas その証拠に下記の様に書くと表示がされないということはなくなります。 ``` highlight: (code) => { return ('hljs' in globalThis ? (hljs?.highlightAuto(code).value): null) ?? code; }, ```

sanchunaka

2024/08/01 08:12

ご回答ありがとうございます。ご指導いただいたコードで表示できるようになりました。３項演算子の後の「⁇」は何を意味しているのでしょうか。それとreturn 文の中身が調べたのですがよくわかりません。私なりに解釈していることをお伝えします。 'hljs' in globalThis ：globalThisは「marked」ということでしょうか、 (hljs?.highlightAuto(code).value) : null)は 'hljs' が真なら(hljs?.highlightAuto(code).value) 'hljs' が偽ならnullこれは理解できています 'hljs' が真とはがよくわかりません。今回偽ということは「定義されていないということ」で何も表示されないのでしょうか。サイトの説明に「hljsは、highlight.jsを読み込むと定義されるグローバルオブジェクトです。」と出ているので、hljsは定義されていると思いましたが違うのでしょうか。最後の「??code;」が分かりません。ご指導いただいたコードをある程度理解してからと思い、サイト検索しましたが、全体的に知識不足なため、深みにハマっています。 returnコードを説明していただければ助かります。返事するのに半日かかりました。よろしくお願いいたします。

juner

2024/08/01 08:45 編集

('hljs' in globalThis ? (hljs?.highlightAuto(code).value): null) ?? code; は三項演算子の式と null合体演算子とその値に分けられます `('hljs' in globalThis ? (hljs?.highlightAuto(code).value): null)` `?? code` `?? code` の null合体演算子とその値は左辺がnull なら指定されたものを返すの意です。 `('hljs' in globalThis ? (hljs?.highlightAuto(code).value): null)` は globalThis (top level の this|global ... つまりここでは window のこと) に hljs が含まれているなら `(hljs?.highlightAuto(code).value)` を実行して値とするそうでなければ null を実行して値とするとなります。なので私の予想では hljs が読み込まれていない為 code を返しているだけだと思われます。もしも値を確認したいのであれば console.log(); に値を設定して F12 のコンソールでオブジェクトを確認するといいと思います（展開できますので。）

sanchunaka

2024/08/01 10:14

index.htmlのlink,scriptを見直して実行したところ、表示はサイトの通り表示されました。プレビュー画面のconst text = "text"; //color:black;になっていますが、サイトは「"text"」が赤い文字です。これを解決したいのですがよろしくお願いいたします。

juner

2024/08/01 12:53

それは質問本文に反映していってください

juner

2024/08/01 12:53

いや、解決したなら別の質問でですね。すみません。

katsuko

2024/08/01 13:08

解決されたようなので余談としてコメントしますが、お使いのmarkedのバージョンは0.3.6のようですが、結構古いものです。質問にあるhighlightの指定方法は、最新のものだと廃止になっています。 https://marked.js.org/using_advanced#options もし新しいmarked.jsを使うのであれば、気をつけた方がよろしいかと思います。

sanchunaka

2024/08/05 17:15

ご指摘ありがとうございます。 codeprepの教材で勉強していますので、とりあえずスムーズに進行したいのでサイトの通りでやっています。検索中でhighlightの廃止を見たような気がします。それはまた新しい勉強の時に学ばさせてさせていただきたいと思います。

行動規範の内容に同意します

回答1件

自己解決

以下のようにコードを変更しました。
うまく表示されない原因は、cdnが適切でなかったことでした。

index.html
1<!DOCTYPE html>
2<html>
3<head>
4  <!-- Required meta tags -->
5  <meta charset="utf-8">
6  <title>コードシンタックスをハイライトしてみよう</title>
7  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.8.0/github-markdown.min.css">
8  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
9
10  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
11  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
12
13  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
14  <link rel="stylesheet" href="./css/main.css">
15  <script src="./js/main.js"></script>
16</head>
17<body>
18
19  <!--マークダウン変換時にハイライト処理を差し込む:6-3
20
21  markedのHTML変換処理のオプションにハイライト処理を差し込んでみましょう。
22
23HINT
24
25  ハイライト処理は、オプションのhighlightプロパティに設定することで差し込むことができます。
26
27  これをhighlightAuto()関数を通じてハイライト処理を行います。
28
29    hljsは、highlight.jsを読み込むと定義されるグローバルオブジェクトです。
30
31TIPS
32
33  webpackなどを使って、highlight.jsをモジュール形式で利用する場合は、次のように利用します。
34
35    marked.setOptions({
36      highlight: function (code) {
37      return require("highlight.js").highlightAuto(code).value;
38-->
39
40  <div class="container">
41    <div class="editor">
42      <textarea class="textarea"></textarea>
43    </div>
44    <div class="preview markdown-body">
45    </div>
46  </div>
47
48</body>
49</html>
50
51  <!--実行結果：Google-Chrome console
52
53  // 左の入力画面                                         右のプレビュー画面
54
55  # heading1                                             heading1
56
57  このマークダウンエディタは`marked`という                  このマークダウンエディタはmarkedというオープンソースの // marked:赤い文字
58  オープンソースのライブラリを利用しています。               ライブラリを利用しています。
59
60  - https://github.com/chjj/marked                          　　● https://github.com/chjj/marked
61
62  ## heading2                                                 heading2
63
64
65  markedの使い方は次の通りで、`marked`に変換したい               markedの使い方は次の通りで、markedに変換したい // marked:赤い文字
66  文字列を渡します。                                            　　　文字列を渡します。
67  ```
68  const text = "text";                                        　　　const text = "text";//文字色、赤
69  marked(text);                                               　　　　marked(text);           
70  ```
71
72  > 作成者                                                          　　　　　作成者 (作成者のimage）https://codeprep.jp
73  > ![image](https://s3-ap-northeast-1.amazonaws.com/               
74  codeprep-migration/book/markdown-editor/codeprep.png)
75  > https://codeprep.jp
76
77-->
78```
79```main.js
80"use strict";
81
82$(function () {
83  const $preview = $(".preview");
84
85  // markedのオプションを設定
86  marked.setOptions({
87    breaks: true,    
88    sanitize: true, 
89    highlight: (code) => {
90      return hljs.highlightAuto(code).value;
91    },
92  });
93
94  // テキスト入力ハンドラ
95  $(".textarea").on("input", (e) => {
96
97    // 入力内容を取得する
98    const text = e.target.value;
99
100    // HTMLに変換する
101    const html = marked(text);
102
103    // プレビューに表示する
104    $preview.empty().append(html);
105
106  });
107
108  // -----------------------------------------------
109  // 初回表示に何かマークダウンを表示させるためのコード
110  const defaultText = `# heading1
111
112  このマークダウンエディタは\`marked\`というオープンソースのライブラリを利用しています。
113
114  - https://github.com/chjj/marked
115
116  ## heading2
117
118  markedの使い方は次の通りで、\`marked\`に変換したい文字列を渡します。
119
120
121  \`\`\`
122  const text = "text";
123  marked(text);
124  \`\`\`
125
126  > 作成者
127  > ![image](https://s3-ap-northeast-1.amazonaws.com/codeprep-migration/book/markdown-editor/codeprep.png)
128  > https://codeprep.jp`;
129
130  $("textarea").text(defaultText).trigger("input");
131
132});
133
134```
135```main.css
136
137body {
138  margin: 10px;
139  padding: 0;
140}
141
142.container {
143  width: 100vw;
144  height: 100%;
145  min-height: 100vh;
146  background-color: #F3E5F5;
147  display: flex;
148}
149
150.preview{
151  padding: 5px;
152  box-sizing: border-box;
153  width: 50%;
154  background-color: #E0D0D0;
155}
156
157.editor {
158  width: 50%;
159  background-color: #FCE4EC;
160  position: relative;
161}
162
163.editor .textarea {
164  position: absolute;
165  width: 100%;
166  height: 100%;
167  resize: none;
168  padding: 5px;
169  font-size: 16px;
170  box-sizing: border-box;
171  border: 0;
172  outline: 0;
173}
174
175
176.markdown-body p code{
177  color: #d14;
178}
179
180.markdown-body blockquote{
181  border-color: #8C608D;
182}
183
184```