티스토리 에디터처럼 코드 하이라이트 변경하기

1. HTML에 아래의 코드를 추가한다. 

<link rel="stylesheet" data-mce-href="./images/atom-one-light.min.css" href="./images/atom-one-light.min.css">
	
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

atom css 파일은 hilight.js에서 다운받은 후, 티스토리에 업로드해서 사용하면 된다.

2. 티스토리 CSS 변경하기 

/* 문단 간격 */
.entry-content p {
	margin-bottom:30px;
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/* code highlight */
.entry-content pre {
  background-color: #fafafa;
  padding:20px;
  font-size: 14px;
  padding: 15px;
  border-radius: 3px;
  font-family: Menlo, Consolas, Monaco, monospace;
  border: 1px solid #ddd;
  margin: 20px auto 0;
  overflow: auto;
}