작업실

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

컨텐츠 정보

본문



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는 코드 블럭을 무지개 색깔로 변환하는건데요. 짝이 맞는 것들끼리 색깔을 매칭해줍니다. ㅎㅎ


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

관련자료

댓글 2 / 1 페이지

우성짱님의 댓글

나리야 1.2.x 버전 이후로는 prism이 기본적으로 들어가있습니다.

따라서 원하는 기능 또는 플러그인이 있다면 /nariya/app/prism/ 폴더에 js파일과 css파일을 넣은 후 /nariya/lib/content.lib.php 파일에서 355번째 줄의


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

위 내용을


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


위와 같이 수정해주면 됩니다!

우성짱님의 댓글

/nariya/lib/content.lib.php 337번째 줄을 아래와 같이 주석처리를 해주면 코드 내에도 역슬래시가 표현이 잘 됩니다.

//$str = stripslashes($str);
전체 157 / 24 페이지
RSS

최근글


새댓글


알림 0