작업실

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);
Total 157 / 1 Page
RSS
그누보드 SMTP 외부메일 설정하는 방법 댓글 16

그누보드 예전에우분투 20.04에서 구글 SMTP메일서버를 활용한 postfix 메일 보내기(https://www.wsgvet.com/home/594)를…

그누보드5에 실시간 채팅 구축하기 댓글 6

서버 현재 제 홈페이지에 있는 실시간 채팅 기능 적용방법을 알려드리겠습니다.원래 기능이 더 업그레이드되면 올리려고 했는데, 언제 업그레이드가 될지 몰…

메일 서버를 Docker로 구축하여 그누보드, 라이믹스, 워드프레스와 연결하기 댓글 15

서버 들어가며도커로 메일서버 구축하기( https://www.wsgvet.com/home/673 )엊그제 윗 글을 올렸습니다.기존에 올렸던 글은 모든…

도커로 메일서버 구축하기

서버 도커 메일서버란?도커에서 메일서버를 직접 운영할 수 있게 해줍니다.SMTP, ESMTP, POP3, IMAP 방식을 사용할 수 있습니다.자신의 …

그누보드5.4 나리야빌더에서 box shadow 효과 적용하기

나리야 현재 제 홈페이지 본문 이미지에 적용된 box shadow 효과를 적용하는 방법에 대해 알려드리겠습니다.우선 적용 전 이미지입니다.위와 같이 사…

그누보드 나리야빌더 NB-Basic 보드스킨 GIF 움짤 표현 최적화하기 댓글 4

나리야 그누보드 5.4.2.8 버전부터 움직이는 GIF 이미지를 올리면 MP4나 WEBM으로 변환하여 보여줄 수 있습니다.https://sir.kr/g…

최근글


새댓글


알림 0