Posts

Showing posts with the label BloggerTips

StackEdit 과 Blogger 연동방법

StackEdit과 Blogger 가 연동되는 아주 좋은 기능이 있다. 이를 사용하는데 2가지 오류를 마주쳤는데 아무리 찾아도 해결방법이 나오지 않았다. 결국 해결책을 찾아냈는데 이에 대한 간단한 메모를 남기고자 한다. 1. Latex이 안뜨는 문제 - 그 전에는 MathJax 자바스크립트를 이용해서 렌더링을 하고 있었는데, StackEdit은 katex 을 사용하기 때문에 html로 변환 해서 blogger로 가져오더라도 Katex 관련 css 가 없으면 이를 렌더링 하지 못한다. 해결 방법 : StackEdit에서 publish하지 말고 html export를 하면 파일 안의 헤더에 css stylesheet link가 있다. 이 부분을 template htm에서 </head> 바로 윗줄에 추가해 주자. 2. Image 사이즈가 내맘대로 조정이 안되는 문제 Markdown을 좀 더 잘 활용하는 방법 중에 <img> 태그를 이용해서 align, size 등을 조절하는 방법이 있다. 그런데 이상하게 <img> 태그에 inline으로 적용한 css 가 먹히지 않는 현상이 있었다. 해결 방법 : Template html 파일을 열고 css가 적혀있는 곳으로 가서  .post-body img  selector을 찾는다. 그중에 max-width:100% 라고 설정되어 있는게 있는데 해당 selector을 통채로 지워주고 나니 inline CSS가 적용되기 시작했다. 3. 끝으로 Featured Thumnail 사진이 너무 크게 나오는 문제점이 있었는데, 이는 CSS 중에 .FeaturedPost1 img selector (max-width = 100% 라고 설정되어 있는 것)을 아예 삭제해주고 나니 포스트에 있는 사진의 크기만큼 나오게 되었다.

Add Latex to Blogger Latex with Pictures(사진으로 설명하는 Latex 추가방법2)

Image
블로거에 Latex 입히기! 이번에는 블로그의 HTML 파일을 직접 열어서 latex 관련 자바스크립트를 추가해 주는 방법입니다. In this post we show how to look into the HTML file of your blog and add Javascript to it's <head> tag 지난번에는 Layout에 들어갔는데요, 이번에는 Theme을 선택해 줍니다(다른 한국어 포스트 들은 다들 Theme을 템플릿이라고 설명하더군요). Go to "Theme" 옵션 부분을 클릭합니다. Click the three dotted option key.  "Edit HTML" 을 클릭합니다. Click "Edit HTML" 아래와 같이 <head> 태그 바로 밑에 아래의 코드를 복붙해주시고 Then add the code bellow to the line right below the <head> tag.   <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js"> MathJax.Hub.Config({ extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"], jax: ["input/TeX", "output/HTML-CSS"], tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]...

사진으로 설명하는 Blogger Latex 추가 방법

Image
사실은 theme에 들어가서 html 을 직접 수정하는 방법도 있지만 coding이 익숙하지 않은 경우 어려울 수 있기에, 우회할 수 있는 방법 하나를 알려드리려 합니다. 우선 Blogger 에 로그인 한 후 사이드바의 Layer에 들어갑니다. Layout 페이지에서 보면 Add Gaget이라는 상자가 보입니다.  Add Gaget을 클리하면 아래와 같은 창이 뜨는데 여기서 HTML/JavaScript 에 들어갑니다. 그러고 나면 다음과 같은 창이 뜨는데요, 여기에 아래와 같은 코드를 Content 박스에 넣어 줍니다. <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js"> MathJax.Hub.Config({ extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"], jax: ["input/TeX", "output/HTML-CSS"], tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true }, "HTML-CSS": { availableFonts: ["TeX"] } }); </script> 그리고 Title은 아무거나 넣어주셔도 됩니다! 그러고 나면 아래와 같이 Latex 조판이 가능해진 것을 확인할 수 있습니다!! 다음 번엔 사진으로 설명하는 HTML 코드에자바 스크립트 추가 방법도...