블로그에 문법적 하이라이트가 포함된 Markdown 환경 구축
5596 단어 JavaScriptbloggertech
의 목적
광고 없는 기사를 무료로 쓸 수 있는 블로그는 유감스럽게도
Mardown 메모는 지원되지 않습니다.
이 글에서 나는 블로그를 Markdown 기법에 응용할 때까지의 내용을 총결하였다.
블로그에 Markdown 기재법과 문법을 적용하기 위해 강조한 글은 이미 존재하지만, 개인은 몇 가지 부족한 기능이 있어 보완을 목적으로 한다.
만약 Mardown만 적용된다면, 이곳의 보도는
열심히 쓰는 사람이 있으니 쓴 대로 하면 문제없다.
하지만 Mardown 기재법에 사용된 Marked는js의 규격에서 언어가 지정하지 않은 코드 블록을 생성하지 않습니다.
예컨대
```
```
이렇게 써도 코드 블록이 생성되지 않는다.```javascript
```
우리는 정상적으로 일할 것이다.또한 문법이 밝아서 사용하는prism.js의 규격은?또는 * 또는 = 등등 토큰(기호)은 배경색을 추가로 추가할 수 있습니다.
이러한 문제를 수정하기 위해 블로그 주제의 HTML/body 위에 다음 코드를 추가합니다.
<style>
code[class*="language-"],
pre[class*="language-"],
code,pre{
background: #eeeeee;
text-shadow: 0 1px white;
color: black;
white-space: pre;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', 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으로 쓴 블로그.
추기
marked.js의 버전이 4.0.0(2021/11/02)으로 올라갔기 때문에 상기 사이트의 코드가 잘 작동하지 않는 것 같습니다.먼저 사용하고 싶은 사람은 읽을 버전을 다음과 같은 버전으로 바꿔 주세요.
https://cdnjs.cloudflare.com/ajax/libs/marked/3.0.8/marked.min.js
Reference
이 문제에 관하여(블로그에 문법적 하이라이트가 포함된 Markdown 환경 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/tiki_ticker/articles/b3af32ed7e8a2b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)