작업실

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


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

관련자료

댓글 0
등록된 댓글이 없습니다.
Total 157 / 3 Page
RSS
DNS 인증을 통한 acme.sh Letsencrypt SSL 인증서 발급받기 댓글 17

서버 0. 들어가며지난 달에 ECDSA Wildcard 인증서 발급 받는 방법에 대해 글을 올렸습니다.https://www.wsgvet.com/bbs…

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

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

Openlitespeed 웹서버 설치 및 Nginx 리버스 프록시 서버 설정하기 (3) 댓글 10

1. 워드프레스 접속하기이제 자신의 주소로 접속해봅니다.한국어로 설정 후 사이트 제목, 아이디 비번만 설정한 뒤에, 자신의 아이디 비번으로 로그…

Openlitespeed 웹서버 설치 및 Nginx 리버스 프록시 서버 설정하기 (2) 댓글 6

1. 관리자 모드 접속 및 lsphp7.4 적용하기(1)편의 마지막부터 다시 시작합니다. 스샷이 너무 없어서 스샷 좀 넣고 갈게요 ㅎㅎadmin…

Openlitespeed 웹서버 설치 및 Nginx 리버스 프록시 서버 설정하기 (1) 댓글 4

1. 들어가며오픈라이트스피드 웹서버(이하 ols)는 워드프레스에 특화된 웹서버라고 보시면 됩니다. LSCACHE라는 워드프레스 캐시 플러그인이 …

우분투 20.04에서 구글 SMTP메일서버를 활용한 postfix 메일 보내기

우분투에는 메일서버를 단독으로 설치할 수 있지만 관리 및 스팸처리 등 손볼게 많습니다.그래서 구글 계정을 이용한 SMTP 메일서버를 구축하면 별…

최근글


새댓글


알림 0