티스토리 코드 테마 넣기.

1. ColorScript 사이트를 통해서 설정을 한 후에 HTMl 붙여넣기

2. JS 파일을 붙여넣기. - https://highlightjs.org/static/demo/

 

 티스토리에서 제공하는 코드블럭은 뭔가 글과 구분도 안되고 보기 쉬워 보이지 않아서 찾아보니 여러 방법들이 있더군...그 중에서 나는 highlight.js 파일을 써보려고 함. 테마가 워낙 많아서 골라쓰는 재미도 있을 듯?ㅋㅋ

테마 적용 전

 

highlight.js 에서 vs2015 테마 적용

function solution(p) {
    return  changeBracket(p)
    
    function changeBracket(w){
        if(w.length === 0) return ""
        else{
            let idx = 0, balance=0
            do{balance = w[idx++]=== "(" ? balance+1 : balance-1
            }while(balance!=0)
            
            const u = w.slice(0,idx)
            const v = w.slice(idx)
            
            if(checkBracket(u)){
                return u + changeBracket(v)
            }else{
                const newV = '(' + changeBracket(v) + ')'
                const newU = u.slice(1,u.length-1).split('').map(e=>e===")"?"(":")").join('')
                return newV + newU
            }
        }
    }
    function checkBracket(w){
        //최소한의 균형잡힌 문자열일 경우, 첫 시작이 "("이면, 무조건 올바른 문자열이 됨
        if(w[0] === ")")    return false
        else if(w[0] === "(") return true
    }
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs2015.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

코드블록 내의 폰트사이즈는 아래문구를 스킨편집에서 추가해준다.
pre > code {font-size: 1.3em;}

 

+혹시나 변경해도 적용이 안 되었다면, HTML 편집에서 코드블럭의 언어 확인 필요

HTML 편집에서 코드블럭이 있는 곳의 class와 language 확인하기.

 

참고사이트

https://devpouch.tistory.com/121

티스토리에서 소스코드 예쁘게 하이라이트 넣는법 - colorscripter 사용법

 

https://lapina.tistory.com/75

[5분 컷] 티스토리 블로그에 코드블럭 예쁘게 출력하는 방법_highlight.js

https://codeac.tistory.com/131

티스토리 코드블럭 내 글씨 사이즈 수정하기