Dymaxion.Kim: Including some JavaScripts into my Google Blogger (1)

Including some JavaScripts into my Google Blogger (1)

내 구글 블로그에 몇가지 자바스크립트 기능 추가하기 (1)

구글 블로거에 외부의 자바스크립트 기능을 추가하기 위해서는 다음의 절차를 따른다.

우선 (1)번의 '디자인' 버튼을 누른다.

그러면 위의 화면으로 들어가 지는데, (2)번의 '템플릿' 버튼을 눌러서 들어간 후에, (3)번의 'HTML 편집' 버튼을 누른다.

그러면 템플릿의 소스코드가 나오는데, 여기의 <head>...</head> 안에 (4),(5),(6)번 내용을 써 넣어 준다.

그러면 모든 블로그의 페이지들에 해당 자바스크립트 기능이 먹어들어간다.
여기서 시도한 (4),(5),(6)번의 내용은 아래의 3가지 기능을 작동하게 해 준다.

소스코드 하일라이팅 기능 추가
수식 편집 및 표현 기능 추가
Processing 스크립트 실행 기능 추가

각 기능을 구현하기 위해 선택한 자바스크립트들은 다음과 같다.

들어간 태그의 내용은 다음과 같다.



<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/zenburn.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>


<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>    
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: { extensions: ["AMSmath.js","AMSsymbols.js"], 
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                   displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>


<script src='https://raw.githubusercontent.com/processing-js/processing-js/v1.4.8/processing.min.js' type='text/javascript'/>

적용후 확인을 해보니...

Highlight.js 는 위와 같이 잘되고 있다.

이때 사용된 <pre><code>...</code><pre> 태그를 사용해서 그 안에 내용을 넣으면 된다고 한다.
다만 html 소스 내용을 넣을 때, 각괄호 '<' 같은 것들 때문에 제대로 안 될 때는...

http://www.jeremymartin.name/projects.php?project=asciible

요기 들어가서 소스코드 자체를 특수문자 시스템으로 변환해 준 후에 복사해서 퍼 넣어주면 된다.

MathJax.js 역시 확인을 해 보면

$\frac{1}{3x^2 +2x-1}$

위 내용은 아래와 같이 html에서 집어 넣어준 것이다.


<span style="font-size: x-large;">
$\frac{1}{3x^2 +2x-1}$
</span>

잘 나온다.
사이즈는 블로거 온라인 편집기상에서 그냥 조절해 준 것이다.

위의 MathJax.js를 활성화시켜주는 트리거링 코드가

같은 것들로 설정되어 있으므로 가급적 이 블로그에서는 이 문자들을 사용하지 않는 것이 좋겠다.

하지만 Processing.js는 크롬/IE에서 안된다.
Firefox에서는 되기도 하고 안되기도 한다. (이리저리 바꿔본 결과)

나중에 시간 나면 고쳐 봐야징...
그나저나 구글 블로거는 아무리 봐도 뭔가 어설프게 만들다 만 것 같다.
구글플러스 연계된 모바일 중심의 다른 구글 서비스들과는 완성도 면에서 왠지...
모르긴 몰라도 구글 내부적으로도 아마 힘없는 개발팀에 속할 듯...

******** Ref.

*** Highlight.js 관련 참고
https://highlightjs.org/
http://istudy.tistory.com/255

*** MathJax.js 관련 참고
* 참고
http://holdenweb.blogspot.kr/2011/11/blogging-mathematics.html
http://docs.mathjax.org/en/latest/start.html#mathjax-cdn
http://webapps.stackexchange.com/questions/47428/mathjax-setting-in-blogger
http://dlimpid.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%97%90%EC%84%9C-Markdown%EA%B3%BC-MathJax-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

Dymaxion.Kim

2014년 11월 6일 목요일

Including some JavaScripts into my Google Blogger (1)

Including some JavaScripts into my Google Blogger (1)

내 구글 블로그에 몇가지 자바스크립트 기능 추가하기 (1)

댓글 없음:

댓글 쓰기