Prism JS syntax highlighter를 설치했습니다.

작업실

Prism JS syntax highlighter를 설치했습니다.

우성군 0 120 0

server {
listen 80;
listen [::]:80;
server_name admin.yoursitename.com;  #자신의 주소로 바꾸세요.

location / {
	rewrite ^/(.*)$ https://admin.yoursitename.com/$1 permanent; #자신의 주소로 바꾸세요.
	}
}

server {

listen 443 ssl http2;
listen [::]:443 ssl http2;
server_tokens off;
client_max_body_size 100M;
include snippets/wp-ssl.conf;

#IP 차단 부분입니다. 밑의 내용을 수정 후 앞에 #을 빼면 IP차단이 적용됩니다.
#allow xxx.xxx.xxx.xxx; #자신의 집 컴퓨터의 외부IP를 확인 후 넣고 앞에 #을 제거하면 됩니다.
#allow 192.168.1.1; # 자신의 컴퓨터에 설치했다면 이것도 추가합니다. 추가 후 #을 제거
#deny all; # 위 아이피 이외에 모든 IP를 차단합니다.

server_name admin.yoursitename.com; #자신의 주소로 바꾸세요.

location / {
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_set_header X-Forwarded-Proto $scheme;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header Host $http_host;
	proxy_pass https://127.0.0.1:7080;
	}
}


위와 같이 코드를 깔끔하게 표현하는 방법에 대해 알려드리겠습니다.


1. 설치방법


https://blog.wsgvet.com/prismjs-syntax-highlighter-gnuboard-amina-nariya 


여기에 올려뒀습니다!



2. 현재 제 홈페이지의 셋팅값


(1) 폰트 크기


우선 폰트를 14px로 변경했습니다. 기존 1em은 13px로 작은 것 같아서 약간 키웠습니다.


prism.css 파일을 열어보면 15번째 줄에 font-size를 수정하면 됩니다.



(2) 현재 지원하는 언어 및 플러그인 셋팅


https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+bash+css-extras+docker+git+markdown+markup-templating+nginx+php+jsx+tsx+typescript&plugins=inline-color+normalize-whitespace+toolbar+copy-to-clipboard+match-braces 


위 링크를 클릭하면 아실겁니다. ㅎㅎ


line number를 빼고 match braces를 넣었습니다. 


라인번호는 마음에 안들더라구요. match braces는 () 나 {} 같이 셋트를 눈으로 쉽게 확인할 수 있는 플러그인입니다.


그래서 1번의 설치방법에서 약간 수정이 필요합니다.



return '<pre><code class="language-'.$brush.';">'.$str.'</code></pre>'.PHP_EOL;


위와 같이 셋팅한 값을



return '<pre><code class="match-braces rainbow-braces language-'.$brush.'">'.$str.'</code></pre>'.PHP_EOL;


위와 같이 잡아줬습니다.


rainbow-braces는 코드 블럭을 무지개 색깔로 변환하는건데요. 짝이 맞는 것들끼리 색깔을 매칭해줍니다. ㅎㅎ


해당 옵션은 지우면 뺄 수 있습니다.

, , , ,

0 Comments