Syntaxhighlighter 를 이용하여 소스코드를 이쁘게 포스팅하자
참조 URL : http://blog.smarttutorials.net/2014/12/syntax-highlighter-blogger-using-google.html
[1부 syntaxhighlighter의 배신 - 난 왜 안됨?]
구글 검색으로 'syntaxhighlighter'로 해 보면 blogger에 설정(? 보다는 Ingegrate) 하는 방법이 나온다.
블로거의 템플릿 디자이너 메뉴에 들어가서 css를 반영하고 js를 임포트 하고 마지막으로 js코드를 집어넣는 과정이다.(참조 : http://anshnote.blogspot.kr/2011/07/syntax-highlighter-blogger.html)
근데! 문제는 이 설정이 내 블로그에는 적용 안된다는 것이다.
왜 안되는지 원인파악은 안됐다.(수 시간을 투자했지만 별로 의미 없고 다른 방법을 알았음으로 패쓰)
또 다른 방법을 물색하던 중 기존 방법보다 훨씬 초초초초 간단한 방법을 발견했다.
이 방법을 이용하면 결과물이 기존방법을 이요하는 것 보다 이쁘진 않다.
하지만 현재로선 나에겐 별다른 선택의 여지가 없어 보이고 이정도면 대만족이기 때문에 활용하기로 한다.
[2부 syntaxhighlighter의 귀환 - 설정편]
방법은 기존 설정방법과 동일하지만 절차가 3단계에서 1단계로 짧아졌다.
그리고 소스코드를 포스팅할 때 언어 별로 약간의 설정방법이 달랐지만 이 또한 심플해졌다.
- 설정하기
블로거 어드민페이지 왼쪽 메뉴바 에서 '템플릿' -> 'HTML편집' 으로 진입한다.
'</head>' 태그를 찾아서 그 앞에다가 아래의 스크립트를 복사해서 붙여넣는다.
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">
</script>
- 사용하기
글 작성 시 'HTML' 모드에서 소스코드가 들어가는 부분을 <pre class='prettyprin'>...</pre> 태그로 감싼다. 대략 이렇게..
<pre class='prettyprint'>
.....
</pre>
그럼 얘가 알아서 언어를 파악하거나 키워드를 파악해서 이쁘게 표현 해 준다.지원 언어는 대략 아래와 같다.
HMTL5, CSS3, PHP, SQL, Java, XML, Javascript, jQuery, Angularjs, Knockoutjs, Python, Bash, SQL, Makefiles, Ruby, VB, Awk, Perl, Pascal, Dart, Matlab, Clojure and etc.
내가 테스트해본 건 ruby, js, c, java 정도 인데 전부 성공!!
[3부 살짝 빠지지만 이쁜 소스코드 포스팅]
아래 샘플 테스트 결과
class Dragon def initialize name @name = name @asleep = false @stuffInBelly = 10 #위 @stuffInIntenstine = 0 #소화중 puts @name + ' is born.' end def feed puts 'You feed ' + @name + '.' @stuffInBelly = 10 passageOfTime end def walk puts 'You walk ' + @name + '.' @stuffInIntenstine = 0 passageOfTime end def putToBed puts 'You put ' + @name + ' to bed.' @asleep = true 3.times do if @asleep passageOfTime end if @asleep puts @name + ' snores, filling the room temperature.' end end if @asleep @asleep = false puts @name + ' wakes up slowly.' end end def toss puts 'You toss ' + @name + ' up into the air.' puts 'He giggles, which singes your eyebrows.' passageOfTime end def rock puts 'You rock ' + @name + ' gently.' @asleep = true puts 'He briefly dozes off...' passageOfTime if @asleep @asleep = false puts '...but wakes when you stop.' end end private def hungry? @stuffInBelly <=2 end def poopy? @stuffInIntenstine >= 8 end def passageOfTime if @stuffInBelly>0 # Move food from belly to intestine. @stuffInBelly = @stuffInIntenstine - 1 @stuffInIntenstine = @stuffInBelly + 1 else if @asleep @asleep = false puts 'He wakes up suddenly!' end puts @name + ' is starving! In desperation, he ate YOU!' exit # This quits the program. end if @stuffInIntenstine >= 10 @stuffInIntenstine = 0 puts 'Whoops!' + @name + ' had an accident....' end if hungry? if @asleep @asleep = false puts 'He wakes up suddenly!' end puts @name + '\'s stomach grumbles...' end if poopy? if @asleep @asleep = false puts 'He wakes up suddenly!' end puts @name + ' does the potty dance...' end end #passegeOfTime end pet = Dragon.new 'Norbert' pet.feed pet.toss pet.walk pet.putToBed pet.rock pet.putToBed pet.putToBed pet.putToBed pet.putToBed
var foo = function(){ console.log("hello world"); } public void main(String Args){ return void; } var stt = "stringify"; Document.ready(){ }
댓글 없음:
댓글 쓰기