본문 영역

Planning2017. 6. 1. 17:49

팀블로그를 열고 받았던 가장 반가웠던 문의 중 하나! 개발코드를 블로그에서 어떻게 보여줄 수 있는가에 대한 문의였습니다. 그래서 코드 하이라이트 방법을 이래저래 찾아봤는데 대세인 SyntaxHighlighter는 스킨과 <pre>코드 충돌, 혹은 헤더에 다량의 코드를 넣어서 (CDN에서 끌어오는 방법이 있기는 하지만 귀찮아서) 로딩 이슈가 생기는 등 운신의 폭이 좁아질 수 있겠더군요. 유지보수를 매우 중요하게 생각하는 저는 그래서 이 방법이 간편하고 가장 깔끔하다! 라고 결론을 내렸습니다.


https://colorscripter.com


사용법은 간단합니다. 

  • 상단에서 언어 등 조건 선택
  • 코드 입력
  • 우하단에 있는 클립보드 복사 버튼 클릭을 누른다음 
  • 티스토리 에디터에 붙여넣으면 끝!
  • html 모드로 변경하지 않아도 됩니다. 그냥 붙여 넣으면 되요.
  • 자 이제 북마크에 등록을 해둡시다 ㅎㅎ 


아래처럼 이렇게 붙게되죠 :)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
 
<head>
 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <title>INSPINIA | Dashboard</title>
 
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
 
    <!-- Toastr style -->
    <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
 
    <!-- Gritter -->
    <link href="js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
 
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
 
</head>
cs

제임스가 잘 활용하면 좋겠군요!!



작성자

account_circle
ElevenStart

댓글 영역