回答編集履歴

2

追記修正

2019/04/19 09:18

投稿

CHERRY
CHERRY

スコア25175

test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- 手抜きコードだとこんな感じでしょうか。これをベースにチャレンジしてみてください。
33
+ 手抜きコードだとこんな感じでしょうか。これをベースにチャレンジしてみてください。(画像のテーマは、twentynineteen です。)
34
34
 
35
35
 
36
36
 

1

追記

2019/04/19 09:18

投稿

CHERRY
CHERRY

スコア25175

test CHANGED
@@ -13,3 +13,77 @@
13
13
 
14
14
 
15
15
  [Highlighting Code Block のソースコード](https://plugins.trac.wordpress.org/browser/highlighting-code-block/trunk/highlighting-code-block.php) を見た感じでは、全ての `<pre>`タグ を置き換える処理はしていないようなので、同じような感じですべての `pre`タグを置き換えたいのであれば、[Filter_Reference/the_content](https://codex.wordpress.org/Plugin_API/Filter_Reference/the_content) あたりを利用して、「Crayon Syntax Highlighter」が置き換えているようなコードを自分で作成するしかないと思います。
16
+
17
+
18
+
19
+ ----
20
+
21
+ (2019.04.19 18:12 追記)
22
+
23
+
24
+
25
+ 手抜きですが `<pre>〜</pre>` を `<div class="hcb_wrap"><pre class="prism line-numbers">〜</pre></div>` に置き換えれば見た目を近づける事はできそうです。
26
+
27
+
28
+
29
+ 完全に同じようにしようとすると「属性」等のチェックや置き換えでいろいろ面倒そうですが...
30
+
31
+
32
+
33
+ 手抜きコードだとこんな感じでしょうか。これをベースにチャレンジしてみてください。
34
+
35
+
36
+
37
+ ```
38
+
39
+ function my_filter_syntax_highlight_185228( $content ) {
40
+
41
+
42
+
43
+ if ( is_single() && in_the_loop() && is_main_query() ) {
44
+
45
+ $content = preg_replace_callback( "|<pre>(.*?)</pre>|su",
46
+
47
+ function( $matches ){
48
+
49
+ return '<div class="hcb_wrap"><pre class="prism line-numbers"><code>'.$matches[1].'</code></pre></div>';
50
+
51
+ },
52
+
53
+ $content );
54
+
55
+ }
56
+
57
+ return $content;
58
+
59
+ }
60
+
61
+
62
+
63
+ add_filter( 'the_content', 'my_filter_syntax_highlight_185228' );
64
+
65
+ ```
66
+
67
+
68
+
69
+ 投稿内容:
70
+
71
+
72
+
73
+ ![イメージ説明](4ddba04dd97b63a16e5114de93172970.png)
74
+
75
+
76
+
77
+ before:
78
+
79
+
80
+
81
+ ![イメージ説明](8534cdfa616e0f8e46fe8199baea07a6.png)
82
+
83
+
84
+
85
+ after: (上記コードの実行例)
86
+
87
+
88
+
89
+ ![イメージ説明](8f28ad8d732af7328b14bd5be9844451.png)