WordPress에서 마크다운을 사용할 때 프리즘을 사용하여 코드를 밝게 만드는 방법

이 글은 주로 워드프레스에서 마크다운을 사용할 때 코드 하이라이팅을 위해 프리즘을 사용하는 방법을 소개하고 있습니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

배경: 최근 기사 편집자 블로그를 마크다운으로 전환했는데, 워드프레스 테마에 포함된 CSS가 코드 하이라이팅을 구현하지 못하는 것을 발견했습니다. 강박 장애로 인해 매우 불편한 것 같아서 마크다운에서 코드 하이라이팅을 구현하려고 최선을 다했습니다.

1. 마크다운 편집기를 사용하세요

먼저 워드프레스에 포함된 기사 편집기를 마크다운으로 전환해야 합니다. 여기서는 몇 번의 비교 끝에 WP Editor.md 플러그를 선택했습니다. - 실시간으로 미리 볼 수 있는 마크다운 편집기를 사용하면 플러그인의 구체적인 장점에 대한 자세한 설명을 읽을 수 있습니다.
플러그인 스크린샷:

가장 중요한 점은 플러그인 코드 강조 표시가 프리즘을 사용하므로 편집 단계의 코드는 자동으로 프리즘 구문을 사용하므로 추가 설정이 필요하지 않습니다. 믿을 수 없다면 기사의 HTML 소스 코드를 확인하면 다음 구문을 볼 수 있습니다.

<pre class="language-c"><code class="language-c">  code_here </code>

코드 강조 옵션은 플러그인 설정에서 켤 수 있습니다. "구문 강조 옵션-지원 프리즘 구문 강조".

2. 자신만의 CSS 및 js 파일을 다운로드하려면 프리즘 공식 웹사이트로 이동하세요.

다운로드 주소: http://prismjs.com/download.htm
일반적으로 사용하는 언어와 구성을 선택하고 DOWNLOAD JS 및 를 클릭하세요. DOWNLOAD CSS css와 js 파일, 즉 prism.js와 prism.css 파일을 다운로드하세요.

3. 워드프레스 테마 수정

테마에 해당하는 폴더를 입력하고 prism 폴더를 생성한 후 해당 폴더에 prism.js 및 prism.css 파일을 넣습니다.

funcations.php 파일 및 사용자 정의 경로를 수정합니다. is prism .js 및 prism.css 파일의 저장 경로입니다

function add_prism() {        
wp_register_style(            
'prismCSS', 
            get_stylesheet_directory_uri() . 'prism/prism.css' //自定义路径
         );          
wp_register_script(            
'prismJS',            
get_stylesheet_directory_uri() . 'prism/prism.js'   //自定义路径
         );        
wp_enqueue_style('prismCSS');        
wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');

4.Enjoy

자, 이때 글을 새로고침하시면 코드 하이라이팅이 구현된 것을 보실 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

WordPress는 등록 인터페이스에서 구현됩니다. 등록 후 비밀번호가 페이지에 직접 표시됩니다.

PHPstudy를 사용하여 Windows 서버에 PHP 시스템을 배포하세요

위 내용은 WordPress에서 마크다운을 사용할 때 프리즘을 사용하여 코드를 밝게 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!