데이트라의 상급편에서 highlight.js를 사용하여 블로그에서 코드를 깨끗이 표시하는 과제가 있습니다.
이쪽입니다만, 실은 수강하고 있을 때 날린 기억이 있어 사람에게 가르치는 장면이 있어 조금 막혔으므로 사보한 자계를 담아 이쪽의 기사를 써 갑니다.

이 기사의 목표

블로그에서 코드를 쓸 때 아래와 같이 색을 붙여 표시시킨다.

highlight.js를 설치하는 방법

먼저 공식 계정에 액세스합니다.
h tps // 히 gh ぃ ghtjs. rg/



Get Version XXXXXX에서 다운로드합니다.
집필시에는 10.3.2 이었습니다만, 바뀌어 가므로 여기가 달라도 신경쓰지 않아 문제 없습니다.

여기서 필요한 언어를 선택하지만 기본값으로 OK라고 생각합니다.


아래로 스크롤하면 다운로드가 나오므로 다운로드하십시오.


필요한 파일은 highlight.pack.js와 styles 중 하나를 선택하십시오!
이번에는 tomorrow-night-eighties.css를 사용합니다.

불러오기

WordPress에서 css와 js를로드합니다.

functions.php

  function my_script_init() {
    wp_enqueue_style('my', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all');
    wp_enqueue_style('my1', get_template_directory_uri() . '/css/tomorrow-night-eighties.css', array(), '10.3.2', 'all');
    wp_enqueue_script('my', get_template_directory_uri() . '/js/highlight.pack.js', array( 'jquery' ), '10.3.2', true);
    wp_enqueue_script('my1', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.0', true);
  }
  add_action('wp_enqueue_scripts', 'my_script_init');

여기에서는 일반 style.css 및 script.js도 로드합니다.script.js에 hljs.initHighlightingOnLoad();를 추가합니다.
이제 <pre><code>로 둘러싸인 영역을 강조 표시합니다.

코드 작성

현재 상태는 <pre><code>로 둘러싸면 강조 표시됩니다.

표시 확인을 위해 아래와 같이 기재


게시 화면에서 게시


실제 표시. single.php <pre><code>ここにコードを記載</code></pre>에 직접 쓴 강조 표시
표시되는 것을 알 수 있을까 생각합니다.

짧은 코드 만들기

매번 <pre><code>라고 쓰는 것도 귀찮아서 짧은 코드를 등록합니다.

functions.php

function highlight_shortcode($class, $content = '')
{    //引数として$classと$contentを定義。
  return '<pre><code class = "' . $class['class'] . '">' . $content . '</code></pre>';    //引数で渡された$classと$contentが代入される。
}
add_shortcode('highlight', 'highlight_shortcode');

위와 같이 쓰면 짧은 코드에 [highlight class="html"]XXXXX[/highlight]<pre><code>가 벗겨지도록. 인수의 html은 css나 PHP등 중에 표시하는 코드에 맞추어 써 주세요.

어려움

짧은 코드에 [highlight class="html"]<div>ここに何か書きますよ</div>[/highlight]를 쓰더라도,<div>가 표시되지 않아서 곤란했습니다. 게다가 뭔가 아래에 불필요한 것도 붙어 있고. .


결론적으로 htps : // / ch-응 응 봐 d. 이 m/에 s카페. HTML 을 사용하여 문자를 변환하면 올바르게 표시할 수 있습니다.


변환하다


표시. div가 표시됩니다.
*html의 문자에 겹치고 있지만, 이것은 <br> 등으로 조정한다.

요약

이제 깨끗하게 코드를 표시할 수 있게 되었습니다.
상당히 어색해서 이해까지 시간이 걸립니다만, 조금씩 해 갈 수밖에 없네요.

이스케이프 처리는 이마이치 이해할 수 없기 때문에 좀 더 공부합니다.