티스토리 코드블럭 테마, 스타일 변경 및 라인 추가, 모바일 적용

리액트 네이티브 프로젝트를 시작한 지 한달이 넘었지만

평일에는 퇴근후 휴식하고, 주말에는 코로나 블루를 타파하기 위해 서울 근교로 돌아다니다보니

프로젝트 진행이 한동안 멈춰버렸습니다.

 

그리고, 적재적소에 useState React component 를 사용하는 것이

아직 익숙치 않아서 Hook 쪽은 새로 공부해야 될 것 같네요.

 

스터디 관련 내용은 다음에 적고, 본론으로 돌아와서..

프로젝트를 시작 하기 위해, 다른 Engineer 코드를 좀 찾아보니

티스토리 코드 블럭을 GitHub 나 AndroidStudio 스타일로 바꿀수 있었습니다.

테마 및 스타일 먼저 적용하고 '리액트 네이티브' 프로젝트를 재개해야겠네요.

 

방법은 어렵지 않으니 아래 순서대로 따라하면 될 것 같습니다.

 

스타일 고르기 https://github.com/highlightjs/highlight.js/tree/master/src/styles 

highlightjs/highlight.js

내가 고른건 github , solarized-dark , solarized-light , androidstudio 정도 되는데

(당연한 얘기지만) androidstudio 는 javascript 와 code type이 잘 맞지 않았고

나머지는 깔끔하게 적용됩니다.

 

스타일 및 폰트 내 블로그에 적용하기

블로그 관리 - 스킨편집 - 우측에 html 편집 - 코드 넣기

우선, google 폰트를 적용

<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">

그리고, 아까 선택한 Highlight style 적용.

여기서 다른 스타일을 원한다면 'github' 대신 'solarized-dark' 등으로 변경 하세요~

min.css 는 꼭 남겨야 함.

마지막 line 은 highlight 를 여기 블로그로 불러온다는 의미.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>

 

라인 추가하기

라인 추가는 다른 블로그 뒤져서 배운 걸 내 테마에 적용하느라 조금 해맸는데

이런 방식으로 하면 모든 테마에 적용이 될 것 같네요~

우선, 스타일 변경과 동일하게 highlight.js 를 사용하기 위해 아래 line을 추가 해줍니다.

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script> <script>hljs.initLineNumbersOnLoad();</script>

이렇게 할경우 몇몇 스킨은 원치 않았던 UI로 나옵니다.

현재 사용중인 Letter 스킨도 마찬가지..

원인은, 기존 스킨의 css 에서 table에 기본값으로 적용된 border 때문이며

이제 border 를 제거 해보겠습니다.

 

'Letter' 스킨 기준으로 CSS 편집을 눌러보면 아래와 같이 table thead tr 등의 값들이 나올 겁니다.

(다른 스킨도 유사하게 나올 것으로 예상됨.)

여기서 아래와 같이 '>' 를 몇군데 추가해주면 해결!!

그럼 최종적으로 원하던 '코드블럭' 형태로 나오는 것을 볼 수 있습니다.

 

마지막으로, 모바일 적용

모바일에서도 코드블럭 테마, 스타일, Line number 를 보기 위해서는 추가 작업이 필요한데,

편집 - 꾸미기- 모바일 - '티스토리 모바일웹 자동 연결을 사용하지 않습니다'

사용하지 않습니다!! 로 적용해야 현재 스타일을 모바일에 옮길 수 있습니다.

 

이제 스터디 진행!!!!!!!!