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(){
}
댓글 없음:
댓글 쓰기