본문 영역
Planning2017. 6. 1. 17:49
팀블로그를 열고 받았던 가장 반가웠던 문의 중 하나! 개발코드를 블로그에서 어떻게 보여줄 수 있는가에 대한 문의였습니다. 그래서 코드 하이라이트 방법을 이래저래 찾아봤는데 대세인 SyntaxHighlighter는 스킨과 <pre>코드 충돌, 혹은 헤더에 다량의 코드를 넣어서 (CDN에서 끌어오는 방법이 있기는 하지만 귀찮아서) 로딩 이슈가 생기는 등 운신의 폭이 좁아질 수 있겠더군요. 유지보수를 매우 중요하게 생각하는 저는 그래서 이 방법이 간편하고 가장 깔끔하다! 라고 결론을 내렸습니다.
사용법은 간단합니다.
- 상단에서 언어 등 조건 선택
- 코드 입력
- 우하단에 있는 클립보드 복사 버튼 클릭을 누른다음
- 티스토리 에디터에 붙여넣으면 끝!
- 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 |
제임스가 잘 활용하면 좋겠군요!!
댓글 영역