2016년 1월 15일 금요일

소스코드를 블로그에서 이쁘게 포스팅(초간단)


 Syntaxhighlighter 를 이용하여 소스코드를 이쁘게 포스팅하자

참조 URLhttp://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(){

}


댓글 없음:

댓글 쓰기