블로그에 문법적 하이라이트가 포함된 Markdown 환경 구축

5596 단어 JavaScriptbloggertech

의 목적


광고 없는 기사를 무료로 쓸 수 있는 블로그는 유감스럽게도
Mardown 메모는 지원되지 않습니다.
이 글에서 나는 블로그를 Markdown 기법에 응용할 때까지의 내용을 총결하였다.
블로그에 Markdown 기재법과 문법을 적용하기 위해 강조한 글은 이미 존재하지만, 개인은 몇 가지 부족한 기능이 있어 보완을 목적으로 한다.
만약 Mardown만 적용된다면, 이곳의 보도는
https://dreamingchicktakenotes.blogspot.com/2017/03/bloggerprismjs.html
https://qiita.com/her0m31/items/1804bdc251a647e0e9a8
열심히 쓰는 사람이 있으니 쓴 대로 하면 문제없다.
하지만 Mardown 기재법에 사용된 Marked는js의 규격에서 언어가 지정하지 않은 코드 블록을 생성하지 않습니다.
예컨대
```
```
이렇게 써도 코드 블록이 생성되지 않는다.
```javascript
```
우리는 정상적으로 일할 것이다.
또한 문법이 밝아서 사용하는prism.js의 규격은?또는 * 또는 = 등등 토큰(기호)은 배경색을 추가로 추가할 수 있습니다.

이러한 문제를 수정하기 위해 블로그 주제의 HTML/body 위에 다음 코드를 추가합니다.
<style>
  code[class*=&quot;language-&quot;],
  pre[class*=&quot;language-&quot;],
  code,pre{
     background: #eeeeee;
     text-shadow: 0 1px white;
     color: black;
     white-space: pre;
     font-family: Consolas, Monaco, &#39;Andale Mono&#39;, &#39;Ubuntu Mono&#39;,  monospace;
     word-spacing: normal;
     word-break: normal;
     word-wrap: normal;
  }
  pre {
     margin: 1em 0; /* ブロック前後の余白 */
     padding: 1em; /* ブロック内の余白 */
     border-radius: 5px; /* 角丸 */
     overflow: auto;
  }
</style>
<style>
   .token.string,
   .token.operator {
     background: none !important;
   }
</style>
이렇게 하면 아무 문제 없이 쓸 수 있다.
실제로 Mardown으로 쓴 블로그.
https://tiki-ticker.blogspot.com/2021/10/phinajs.html
추기
marked.js의 버전이 4.0.0(2021/11/02)으로 올라갔기 때문에 상기 사이트의 코드가 잘 작동하지 않는 것 같습니다.먼저 사용하고 싶은 사람은 읽을 버전을 다음과 같은 버전으로 바꿔 주세요.
https://cdnjs.cloudflare.com/ajax/libs/marked/3.0.8/marked.min.js

좋은 웹페이지 즐겨찾기