코드 하이라이트 기능 설치와 적용 - Syntax_Highlight_Style > 웹제작/운영

코드 하이라이트 기능

Syntax_Highlight_Style 설치

하이라이트 기능이란 뜻은 프로그래밍 언어 부분을 보기 좋게 만들어 주는 기능을 말한다. 

예를 들면, 아래와 같이 검은 바탕에 구별하기 쉬운 글자색이 되도록 자동으로 만들어 주는 것이다.

[code]

echo "프로그래밍 코딩";

[/code] 

그 중에서 가장 간단하게 설치하는 방법을 알아 본다. 그누보드의 경우, 훅기능을 제공하기 때문이다.

훅 기능이란 뜻은 따로 인클루드 같은 것을 걸어주지 않아도 폴더에만 넣어두면 알아서 가져 가는 기능을 말한다.

코드 하이라이트 기능 설치/적용 - Syntax_Highlight_Style

그누보드 훅 기능 이용

그누보드에는 훅 기능이 있다. extend 디렉토리에 파일을 넣어두면 자동으로 실행시켜 주는 기능이다.

이것을 이용해서 코드 하이라이트 기능을 쉽게 적용시켜 보자.

아래 링크에서 첨부파일을 다운 받아서 FTP로 접속한다. 

그누보드 디렉토리 중 extend 폴더에 이것을 업로드 한다. 

https://sir.kr/so_54forum/130

이후로는 글을 쓸 때마다 code와 /code 사이에 있는 문장은 코드라고 인식해서 보기 좋게 만들어 준다.

사용법 : [코드] [/코드]를 영어로 입력한 후, 그 사이 줄에 태그나 프로그래밍 언어를 넣으면 된다. 

Syntax Highlight 설치 주의 사항

만약, 그누보드 설치 때에 경로를 바꾸었다면 여기에서도 적용해 줘야 한다. 

[code]

if($_SERVER['SCRIPT_NAME'] != '/bbs/board.php' || !$wr_id)

[/code]

이 부분은 view.php에서 불러오도록 하는 코드인데, 경로를 바꿨다면 bbs부분을 자신의 경로에 맞게 바꿔줘야 작동한다.

또한, 스타일 파일이 잘 안 불려들여지는 경우도 있다. 그럴 때는 파일을 따로 만들어서 저장하는 방법도 있다. 

스타일 파일이 있는 URL은 아래와 같다.

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/a11y-dark.min.css

위 주소로 접속해서 전체를 복사해서 "Syntax_Highlight_Style.css"라는 이름으로 저장한 후 자신의 계정에 업로드하면 문제 해결이 가능하다.

단, 이 경우엔 Syntax_Highlight.php에서 스타일을 부르는 부분을 변경해줘야 한다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

[code]

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/a11y-dark.min.css">

[/code]

위의 링크 경로를 자신이 업로드한 경로 주소로 바꿔준다.