Including some JavaScripts into my Google Blogger (2)
내 구글 블로그에 몇가지 자바스크립트 기능 추가하기 (2)
기존에 구글 블로거 템플릿의 <head> 안에 추가한 JavaScript들은, 모두 해당 JS들의 원래 제공처 위치를 링크시킨 것이었다.
그래서 그것들을 전부 다운로드 받아, 나의 구글 드라이브에 저장하고 웹공유를 하도록 설정한 다음 다시 고쳐써서 적용하여 보았다.
<link href='https://www.googledrive.com/host/0B3VzdmodvgcINEMtRTA3SVVUM28/highlight/styles/monokai_sublime.css' rel='stylesheet'/>
<script src='https://www.googledrive.com/host/0B3VzdmodvgcINEMtRTA3SVVUM28/highlight/highlight.pack.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<script src='https://www.googledrive.com/host/0B3VzdmodvgcINEMtRTA3SVVUM28/MathJax/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://www.googledrive.com/host/0B3VzdmodvgcINEMtRTA3SVVUM28/ProcessingJS/processing.min.js' type='text/javascript'/>
Highlight 잘 먹는거 확인 되었고..
$\frac{1}{2x_k^2+3x_k-7}$
$\frac{\partial y}{\partial x}$
$\sum_{i=1}\frac{\partial y}{\partial x}^{n}{X_i^2}$
$\sum_{i=1}^{n}{X_i^2}$
$\begin{pmatrix}
a_{11} & a_{12} & a_{13}\\
a_{21} & a_{22} & a_{23}\\
a_{31} & a_{32} & a_{33}
\end{pmatrix}$
$\begin{pmatrix}
a_{11} & \cdots & a_{1n}\\
\vdots & \ddots & \vdots\\
a_{m1} & \cdots & a_{mn}
\end{pmatrix}$
$\overrightarrow{AB}$
$\vec{F}=m\vec{a}$
$e=m c^2 $
$\vec{F}=m \frac{d \vec{v}}{dt} + \vec{v}\frac{dm}{dt}$
MathJax 역시 잘 먹는다.
다만 상당히 무겁다는게 느껴진다.
가볍게 하려면 옵션을 이리저리 만져줘야 할텐데, 일단 머리아프니깐 생략.
마지막으로 Processing.js는....?
Processing Script는 아래의 것을 사용해 본다.
<script type="application/processing">
// 2-links arm
// for test of pushMatrix() & popMatrix()
// by dongkim
int arm1_length = 70;
int arm1_width = 20;
int arm2_length = 70;
int arm2_width = 20;
void setup()
{
size(300,300);
}
void draw()
{
background(0);
pushMatrix();
translate(width/2,height/2);
rotate(PI*mouseX/(width/2)+2*PI);
rect(-arm1_width/2,0,arm1_width,arm1_length);
pushMatrix();
translate(0,arm1_length);
rotate(PI*mouseY/(height/2)-PI);
rect(-arm2_width/2,0,arm2_width,arm2_length);
popMatrix();
popMatrix();
}
</script>
<canvas></canvas>
이걸 집어넣고 돌려보면....
안나오네.. 쩝. 망했다.
뭐가 잘못된거지... ㅠㅠ
음. 구글 드라이브 동기화가 아직 덜 됐구나..
동기화 다 되고 나서 확인해 봐야겠음.
---> 동기화 되어서 파일 다 올라간 후에 확인해 보니 잘 되넹.
이전에 github에서 제공하는 URL을 script로 링크시켰을 때는 파이어폭스 이외에는 작동이 안 되던데, 구글 드라이브에 설치하고 해 보니깐 잘 된다.
이유는 모르겠....
* 확인해 본 환경
1.윈도우7 : 파폭,크롬,IE
2. 리눅스 : 파폭,크롬
3. 안드로이드 : 파폭, 크롬, 돌핀
--> 안드로이드에서는 마우스 대신 터치 인터페이스라서, 마우스와는 미묘하게 다른 것 같다.
Processing.js를 심어넣고 위에 걸 해 보니깐 브라우저의 마우스 입력과 겹쳐서 제대로 동작이 안 되는 것 처럼 보인다. 하지만 sketchpad.cc에서 제공하는 Processing.js 서비스에서는 팽팽 날아다닌다. 똑같은 스크립트인데 뭐가 다른 거지....
어설프게 뭘 해 보려니깐 제대로 되는게 없다. 쩝.
,