본문 바로가기
그래픽/기타

티스토리 새 에디터에 highlight.js 코드 문법 적용 및 89개 스타일 미리보기

체리C2019. 7. 28. 10:52
반응형

티스토리가 새 에디터를 출시했다. 직관적이고 세련된 디자인과 플래시를 이용하지 않는 파일 업로드 기능으로 편리성을 더했다. 아직 베타 버전이라 자잘한 버그가 있지만 생각보다 빠르게 적응되었다.

 

좋은 점

  1. 에디터가 깔끔해졌다. 새 에디터는 미리보기를 눌러도 통계나 유입 로그에 집계되지 않는다.[각주:1]
  2. 플래시 없이 사진을 올릴 수 있다.
  3. 표 만들기가 더 쉬워지고 오류도 없다. 구 에디터는 너비를 100%로 설정해도 모바일에서는 제대로 기능하지 않았다. 새로운 에디터의 표 만들기는 쉽게 만들 수 있고 더욱 깔끔하다.
  4. 나눔고딕, 바른고딕, 본명조 등 기본 웹폰트가 제공된다.

 

아쉬운 점

  1. 오디오 재생이 안된다. 오디오 파일을 첨부하면 다운로드할 수 있게 링크로 만들어진다. 구 버전 에디터는 미디 파일을 첨부하면 재생이 안되고 다운로드 기능도 없었다. 또한 WAV도 다운로드 링크를 만들려면 압축파일로 만든 뒤 올려야 했다. MP3 기능은 재생뿐만 아니라 다운로드 기능도 제공해서 편했다. 새 에디터는 오디오 파일 재생이 안되어 불편하다.
  2. 글자 배경색의 프리셋은 구 버전이 더 예뻤다. 색을 저장하는 기능이 있으면 편리할 것 같다.
  3. 사진을 첨부하면 간혹 엑박이 뜬다.

 

이 번에 새로 추가된 코드블럭 기능은 그 자체로 사용할 수 없다. 원하는 신택스 하이라이터를 설치하여야 한다.

 

<내용 추가>
아래 방법이 아닌 티스토리에서 제공하는 플러그인을 적용하는 것이 더 빠르고 간편하다. 특별히 원하는 테마가 있는 것이 아니라면 플러그인을 설정하면 된다.

 

티스토리 코드 문법 강조 플러그인

 

 

여러 신택스 하이라이터 중 가장 예쁘고 설치도 간단한 highlight.js를 설치해 본다. 많은 테마를 지정할 수 있는데 미리보기가 잘 되어 있는 곳이 없어서 내가 정리했다. 간단히 CDN주소를 복사 및 붙여 넣기 하는 것으로 설치 한 뒤 테마를 바꿔주면 된다.

 

모든 스타일시트의 CDN의 출처: https://cdnjs.com/libraries/highlight.js/

highlight.js 설치하기

코드만 붙여 넣고 테마 주소만 바꿔주면 된다.

 

① 티스토리 스킨 편집으로 가서 HTML을 편집한다. <head>와 </head> 사이에 아래의 내용을 복사 및 붙여 넣기 한다.

 

<!--highlight.js 신택스 하이라이터 적용 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-sulphurpool-light.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.6/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

 

아래 사진과 같이 <head> </head> 사이에 모두 붙여 넣기 한다.

 

highlight.js 적용하기

② 시험해 본다. 저장 후 새 에디터로 돌아와 코드블럭을 누르고 아무거나 입력 후 미리보기를 눌러 확인한다.

 

상단 점 3개 버튼의 코드블럭을 클릭한다.
테스트 겸 아무거나 쓰고 확인을 누른다.

③ 새 에디터 왼쪽 하단의 미리보기를 눌러 작동되는지 확인한다.

 

잘 나오면 성공이다. 이제 맘에 드는 스타일을 골라 스타일시트 주소를 변경해 준다. 아래 노란 배경 부분만 변경해 주면 된다.

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-sulphurpool-light.min.css">

highlight.js 스타일 미리 보기

1. a11y-dark

 

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

 

a11y-dark

2. a11y-light

 

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

 

a11y-light

3. agate

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/agate.min.css

 

agate

4. an-old-hope

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/an-old-hope.min.css

 

an-old-hope

5. androidstudio

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/androidstudio.min.css

 

androidstudio

6. arduino-light

 

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

 

arduino-light

7. arta

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/arta.min.css

 

arta

8. ascetic

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/ascetic.min.css

 

ascetic

9. atelier-cave-dark

 

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

 

atelier-cave-dark

10. atelier-cave-light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-cave-light.min.css

 

atelier-cave-light

11. atelier-dune-dark

 

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

 

atelier-dune-dark

12. atelier-dune-light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-dune-light.min.css

 

atelier-dune-light

13. atelier-estuary-dark

 

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

 

atelier-estuary-dark

14.  atelier-estuary-light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-estuary-light.min.css

 

atelier-estuary-light

15. atelier-forest-dark

 

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

 

atelier-forest-dark

16. atelier-forest-light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-forest-light.min.css

 

atelier-forest-light

17. atelier-heath-dark

 

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

 

atelier-heath-dark

18. atelier-heath-light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-heath-light.min.css

 

atelier-heath-light

19. atelier-lakeside-dark

 

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

 

atelier-lakeside-dark

20. atelier-lakeside-light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-lakeside-light.min.css

 

atelier-lakeside-light

21. atelier-plateau-dark

 

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

 

atelier-plateau-dark

22. atelier-plateau-light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-plateau-light.min.css

 

atelier-plateau-light

23. atelier-savanna-dark

 

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

 

atelier-savanna-dark

24. atelier-savanna-light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-savanna-light.min.css

 

atelier-savanna-light

25. atelier-seaside-dark

 

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

 

atelier-seaside-dark

26. atelier-seaside-light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-seaside-light.min.css

 

atelier-seaside-light

27. atelier-sulphurpool-dark

 

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

 

atelier-sulphurpool-dark

28. atelier-sulphurpool-light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-sulphurpool-light.min.css

 

atelier-sulphurpool-light

29. atom-one-dark-reasonable

 

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

 

atom-one-dark-reasonable

30. atom-one-dark

 

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

 

atom-one-dark

31. atom-one-light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-light.min.css

 

atom-one-light

32. brown-paper

 

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

 

brown-paper

33. codepen-embed

 

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

 

codepen-embed

34. color-brewer

 

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

 

color-brewer

35. darcula

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/darcula.min.css

 

darcula

36. dark

 

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

 

dark

37. darkula

이름에 dark가 있어 어두운 테마인 것 같은데 오류인지 원래 그런 것인지 아래와 같이 나온다.

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/darkula.min.css

 

 

38. default

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css

 

default

39. docco

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/docco.min.css

 

docco

40. dracula

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dracula.min.css

 

dracula

41. far

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/far.min.css

 

far

42. foundation

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/foundation.min.css

 

foundation

43. github-gist

 

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

 

github-gist

44. github

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css

 

github

45. gml

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/gml.min.css

 

gml

46. googlecode

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/googlecode.min.css

 

googlecode

47. grayscale

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/grayscale.min.css

 

grayscale

48. gruvbox-dark

 

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

 

gruvbox-dark

49. gruvbox-light

 

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

 

gruvbox-light

50. hopscotch

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/hopscotch.min.css

 

hopscotch

51. hybrid

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/hybrid.min.css

 

hybrid

52. idea

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/idea.min.css

 

idea

53. ir-black

 

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

 

ir-black

54. isbl-editor-dark

 

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

 

isbl-editor-dark

55. isbl-editor-light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/isbl-editor-light.min.css

 

isbl-editor-light

56. kimbie.dark

 

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

 

kimbie.dark

57. kimbie.light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/kimbie.light.min.css

 

kimbie.light

58. lightfair

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/lightfair.min.css

 

lightfair

59. magula

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/magula.min.css

 

magula

60. mono-blue

 

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

 

mono-blue

61. monokai-sublime

 

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

 

monokai-sublime

62. monokai

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai.min.css

 

monokai

63. nord

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/nord.min.css

 

nord

64. obsidian

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/obsidian.min.css

 

obsidian

65. ocean

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/ocean.min.css

 

ocean

66. paraiso-dark

 

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

 

paraiso-dark

67. paraiso-light

 

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

 

paraiso-light

68. pojoaque

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/pojoaque.min.css

 

pojoaque

69. purebasic

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/purebasic.min.css

 

purebasic

70. qtcreator_dark

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/qtcreator_dark.min.css

 

qtcreator_dark

71. qtcreator_light

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/qtcreator_light.min.css

 

qtcreator_light

72. railscasts

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/railscasts.min.css

 

railscasts

73. rainbow

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/rainbow.min.css

 

rainbow

74. routeros

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/routeros.min.css

 

routeros

75. school-book

 

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

 

school-book

76. shades-of-purple

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/shades-of-purple.min.css

 

shades-of-purple

77. solarized-dark

 

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

 

solarized-dark

78. solarized-light

 

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

 

solarized-light

79. sunburst

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/sunburst.min.css

 

sunburst

80. tomorrow-night-blue

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/tomorrow-night-blue.min.css

 

tomorrow-night-blue

81. tomorrow-night-bright

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/tomorrow-night-bright.min.css

 

tomorrow-night-bright

82. tomorrow-night-eighties

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/tomorrow-night-eighties.min.css

 

tomorrow-night-eighties

83. tomorrow-night

 

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

 

tomorrow-night

84. tomorrow

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/tomorrow.min.css

 

tomorrow

85. vs

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs.min.css

 

vs

86. vs2015

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs2015.min.css

 

vs2015

87. xcode

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/xcode.min.css

 

xcode

88. xt256

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/xt256.min.css

 

xt256

89. zenburn

 

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/zenburn.min.css

 

zenburn

  1. 이건 아닌 것 같다. [본문으로]
반응형

'그래픽/기타' Related Articles


티스토리툴바