質問編集履歴
1
index.htmlのheadの修正、質問の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,28 +1,8 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
markedのオプション設定でhighlightを差し込みたいのですが、
|
|
3
|
-
highlightのコメントを外すと何もプレビューされなくなる。
|
|
4
3
|
下はプレビューの一部ですが「"text"」の文字を赤で表示したい
|
|
5
4
|
const text = "text";
|
|
6
5
|
marked(text);
|
|
7
|
-
|
|
8
|
-
```ここに言語を入力
|
|
9
|
-
// markedのオプションを設定
|
|
10
|
-
marked.setOptions({
|
|
11
|
-
breaks: true, // breaksを有効にすると、取消線が表示されるようになります。ま
|
|
12
|
-
sanitize: true, // sanitizeを有効にするとHTMLタグが入力された場合に、
|
|
13
|
-
// ただのテキストとして出力します。
|
|
14
|
-
// highlight: (code) => {
|
|
15
|
-
// return hljs.highlightAuto(code).value;
|
|
16
|
-
// },
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
### 発生している問題・分からないこと
|
|
22
|
-
markedのオプション設定でhighlightを差し込みたいのですが、
|
|
23
|
-
highlightを差し込むと何もプレビューされなくなる。
|
|
24
|
-
|
|
25
|
-
|
|
26
6
|
|
|
27
7
|
### 該当のソースコード
|
|
28
8
|
|
|
@@ -34,6 +14,7 @@
|
|
|
34
14
|
<!-- Required meta tags -->
|
|
35
15
|
<meta charset="utf-8">
|
|
36
16
|
<title>コードシンタックスをハイライトしてみよう</title>
|
|
17
|
+
|
|
37
18
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.8.0/github-markdown.min.css">
|
|
38
19
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
|
|
39
20
|
|
|
@@ -45,27 +26,6 @@
|
|
|
45
26
|
<script src="./js/main.js"></script>
|
|
46
27
|
</head>
|
|
47
28
|
<body>
|
|
48
|
-
|
|
49
|
-
<!--マークダウン変換時にハイライト処理を差し込む:6-3
|
|
50
|
-
|
|
51
|
-
markedのHTML変換処理のオプションにハイライト処理を差し込んでみましょう。
|
|
52
|
-
|
|
53
|
-
HINT
|
|
54
|
-
|
|
55
|
-
ハイライト処理は、オプションのhighlightプロパティに設定することで差し込むことができます。
|
|
56
|
-
|
|
57
|
-
これをhighlightAuto()関数を通じてハイライト処理を行います。
|
|
58
|
-
|
|
59
|
-
hljsは、highlight.jsを読み込むと定義されるグローバルオブジェクトです。
|
|
60
|
-
|
|
61
|
-
TIPS
|
|
62
|
-
|
|
63
|
-
webpackなどを使って、highlight.jsをモジュール形式で利用する場合は、次のように利用します。
|
|
64
|
-
|
|
65
|
-
marked.setOptions({
|
|
66
|
-
highlight: function (code) {
|
|
67
|
-
return require("highlight.js").highlightAuto(code).value;
|
|
68
|
-
-->
|
|
69
29
|
|
|
70
30
|
<div class="container">
|
|
71
31
|
<div class="editor">
|
|
@@ -136,9 +96,9 @@
|
|
|
136
96
|
breaks: true, // breaksを有効にすると、取消線が表示されるようになります。ま
|
|
137
97
|
sanitize: true, // sanitizeを有効にするとHTMLタグが入力された場合に、
|
|
138
98
|
// ただのテキストとして出力します。
|
|
139
|
-
|
|
99
|
+
highlight: (code) => {
|
|
140
|
-
|
|
100
|
+
return hljs.highlightAuto(code).value;
|
|
141
|
-
|
|
101
|
+
},
|
|
142
102
|
});
|
|
143
103
|
|
|
144
104
|
// テキスト入力ハンドラ
|
|
@@ -213,15 +173,14 @@
|
|
|
213
173
|
marked(text); marked(text);//background;white
|
|
214
174
|
```
|
|
215
175
|
|
|
216
|
-
> 作成者 作成者 (
|
|
176
|
+
> 作成者 作成者 (image）https://codeprep.jp
|
|
217
177
|
> 
|
|
219
179
|
> https://codeprep.jp
|
|
220
180
|
|
|
221
|
-
//上の
|
|
181
|
+
//上のプレビューでconst text = "text"; //color:black;をconst text = "text"; //color:red;にしたい。
|
|
222
|
-
|
|
182
|
+
|
|
223
|
-
|
|
183
|
+
|
|
224
|
-
//実行した結果を乗せています。
|
|
225
184
|
|
|
226
185
|
### 補足
|
|
227
186
|
windows10,vscodeのport5500を使用して、google chromeで表示しています。
|