highlight.jsテストページ1

1.CSSコード:
コードエディタにて記載したものが下記です。

body {
  background: #fff;
  font-size: 1em;
}

ハイライトさせることができました。

2.HTMLコード:
ショートコード[ highlight ]をfunctions.phpに登録して使用したものが下記です。
ショートコードに<class=”html”>をつけることで、左上にマークが出るようになりました。
[ highlight class=”html” ]~[ /highlight ]

<h1 class=”entry-404-head”><span>404</span>Not Found</h1><!– /entry-404-head –>
<div class=”entry-404-lead”>お探しのページが<br class=”m_sp” />見つかりませんでした</div><!– /entry-404-lead –>

ハイライトさせることができましたが、検証ツールを確認すると<br>が入ってしまっているようです。

2-2.HTMLコード:
ショートコードではなく、コードエディタにて同様の記載をすると<br>はありません。

<h1 class="entry-404-head"><span>404</span>Not Found</h1><!-- /entry-404-head -->
<div class="entry-404-lead">お探しのページが<br class="m_sp" />見つかりませんでした</div><!-- /entry-404-lead -->

3.PHPコード:
ショートコードだと同じく<br>があるので、コードエディタにて記載。

function do_not_convert_from_tab_to_space( $text ) {
  $text = str_replace( "半角スペースを4つ分、記載する", "\t", $text );
  return $text;
}
add_filter( "wpcom_markdown_transform_post", "do_not_convert_from_tab_to_space" );

ハイライトさせることができました。

以上、お疲れ様でした。

お問い合わせはこちら