티스토리 code highlight에 abap 코드 적용
티스토리에 개발 블로그를 작성하는 사람이라면 코드 작성은 필수적일 것이다.
티스토리에서는 이를 지원하기 위해 "플러그인 -> 코드 문법 강조"를 지원하고 있다.
이 부분은 구글에 검색해도 많이 나오고, 클릭 몇 번으로 간단히 적용할 수 있다.
하지만 ABAP 개발자들이 소스코드를 올릴 때 티스토리의 코드블럭은 ABAP 언어를 지원하지 않는다..
이를 해결하기 위해 Highlight.js를 사용하라는 글이 많지만, 여기서도 ABAP은 지원하지 않는다..
포기하고 그냥 다른 언어로 올리고 있었는데 구글을 검색하던 중 아래 블로그에서 방법을 찾았다.
소스코드 Highlight 처리
과거에 무언가 설정해 놓고, 아무 생각없이 스킨을 변경해버렸더니 모든 수정 내용이 날아가 버렸다. 그 덕에 예전에 다 설정해놓고 써 놓았던 코드 하일라이트 기능은 모두 날아가 버렸다.그래
www.hind.pe.kr
아래 Step을 따라가면서 코드블럭에 ABAP 스타일을 적용해 보자.
- Step 01 : http://prismjs.com/에서 ABAP을 위한 js, css 파일 다운로드하기
Prism
Supported languages This is the list of all languages currently supported by Prism, with their corresponding alias, to use in place of xxxx in the language-xxxx (or lang-xxxx) class: Couldn’t find the language you were looking for? Request it!
prismjs.com
위 링크 접속 후 Languages에서 ABAP을 체크한 후 제일 하단에 "DOWNLOAD JS" , "DOWNLOAD CSS"를 눌러 파일을 다운로드한다.
- Step 02 : 티스토리에 적용하기
1. 티스토리 블로그관리 홈으로 들어간다.
2. 꾸미기 → 스킨 편집 클릭
3. 스킨 편집 → html 편집 클릭
4. 파일업로드에 "+추가" 버튼을 눌러 Step 01에서 다운로드한 js, css 파일을 업로드한 후 적용 버튼을 누른다.
5. html 파일 수정하기
5.1 HTML에 <head> ~ </head> 태그 사이에 아래 코드를 추가한다
<link type="text/css" rel="stylesheet" href="./images/prism.css"/>
5.2 HTML의 아래 내려보면 <body> ~ </body> 태그에 아래 코드를 추가한다.
<script type="text/javascript" src="./images/prism.js"></script>
이제 HTML 수정 후 상단의 "적용" 버튼을 눌러 변경사항을 저장한다.
- Step 03 : 글쓰기에서 코드블럭에 ABAP 스타일 주기
소스코드를 넣을 때 일단 < > 코드블럭에 아무 언어를 선택해 소스코드를 작성한다.
여기선 java로 선택해 소스코드를 넣었는데, 아래와 같이 그냥 텍스트로 나온다.
이 부분을 ABAP처럼 나오게 하려면 번거롭지만 기본모드를 HTML로 변경하고 수정해야 한다.
일단 이 방법이 최선인 것 같다...
HTML모드로 들어가서 <code> 태그가 있는 곳을 보면 class , data-ke-language가 java로 되어있다.
( 위에서 언어를 java로 선택했으니까..)
이 부분을 class="lang-abap" data-ke-language="abap" 으로 변경하면 게시글 포스팅 시 ABAP 스타일이 적용되어 나온다.
이렇게 변경하면 드디어 우리한테 익숙한 소스코드가 보인다.
다른 방법이 있는지 모르겠지만 html, css 웹을 잘 모르는 나한텐 이 방법이 최선이었다..
이 방법의 단점은 코드블럭의 class를 일일이 변경해 줘야 한다는 것, abap으로 변경 시 코드블럭이 수정되지 않는 문제를 가지고 있다..
나중에 다른 방법을 찾으면 업데이트해 봐야겠다..