KTUG마당은 KTUG를 방문하는 모든 이용자가 대화를 나누고 소식을 전하는 곳입니다.

  • 로그인 없이 자유롭게 글을 읽고 쓸 수 있는 철학은 처음과 같이 계속됩니다.
  • Team Blog의 글을 이곳 게시판의 "정보글"로 모았습니다. Team blog는 기고자가 올린 글에 질문을 받는 부담을 줄이기 위하여 댓글을 허용하지 않았습니다. 그러나 이곳 게시판으로 모으면서 댓글을 달 수 있습니다. 게시물을 작성하실 때 댓글을 원하지 않으시면 댓글을 허용하시지 않으시기를 바랍니다. 또한 불필요한 소모성 댓글을 달지 않도록 주의하여 주시기를 바랍니다.
  • TeX과 관련된 질문이나 답변은 QnA 마당을 이용하십시오. TeX과 관련된 질문은 지웁니다
  • MathJax를 이용한 수식조판을 사용하실 수 있습니다. 여기를 참조하세요.
  • 스팸 글을 막기 위하여 짧은 시간 내에 다시 글이 등록되는 IP를 막거나, 광고 글을 막기 위하여 금지어로 .com, .net 등을 설정하고 있습니다. 다소간의 불편함이 있으시더라도 양해 바랍니다.
    • 금지어에서 stackexchange, stackoverflow, ctan, overleaf, , github, google.com, gmail.com, .org, .io, sil.org, wiki.com, tistory.com등은 해제하였습니다.
  • 사용하는 편집기는 CKeditor입니다. 편집기에서 [enter]를 누르면 <p> 태그가 들어가고, 문단으로 생각하고 한줄을 비웁니다. 글줄만 바꾸려면 shift-enter 를 누르시면 <BR>가 들어가므로 용도에 맞게 나누어 쓸 수 있습니다.

정보글 github blog와 latex

2020.12.11 18:28

euns 조회 수:4529

8월에 kramdown이 버전이 바뀌면서 올해 초에 발표했던 MathJax 적용이 망가졌습니다.

따라서 제 블로그도 고치고 관련 발표를 했다는 책임감에 해당 발표자료를 수정하고 여기에도 포스팅하여 남기겠습니다.

markdown 문법 적용 및 잘린 부분 때문에 직접 링크로 보시는걸 추천드립니다.

여기서는 존댓말을 써야겠다는 생각이 들지만 너무 시간이 많이 드므로 문체를 따로 수정은 않겠습니다...

이로인해 불편함을 받으신다면 죄송합니다..

 

금지어때문에 여러 링크들, html 코드를 통째로 들어냈습니다 필요하시다면 위의 원 포스팅을 읽어주시기 바랍니다.

https://eeeuns.github.io/2020/12/10/githubblog/

현재 제가 github blog jekyll MathJax 로 운영 중이며 tex파일로 작업한것들은 변환 사이트에서 markdown 으로 변환하고 표,이미지 같은거는 직접 다시 만들어서 업로드 해왔습니다.

 

(관리자. 원 포스팅의 내용을 참조하여 HTML코드를 가능한 넣어서 원글과 유사하게 고쳤습니다)

--------------------------------------------------------------------------------------------------------------------------------------------

github blog와 LaTeX

2020 한국텍학회 제13차 정기총회 및 학술대회 발표자료를 posting 한것.

1. latex 수식을 포스팅하기 위한 여러가지 방안의 장단점을 따지고

2. 여러가지 방안의 수식을 쓰는 법에 대해서 정리하고 텍수식 적용 플러그인인 KaTeX와 MathJax 비교

3. 대안으로서 github blog의 jekyll과 MathJax을 제안 

해당 발표 repo

수식을 위한 BLOG

blog platform

  1. Naver blog
  2. Tistory
  3. Blogger
  • 접근성 용이  
  • 편의성 제공 ↔ 제한된 기능

직접 만들기

  1. 직접 세팅
  2. 높은 자유도
  3. 서버 유지 비용
  4. 도메인 비용
  5. 파일로서 직접 평생 소유
  6. 어렵다

수식 쓰기

Naver Blog에서 수식쓰기

에디터 자체에서 수식기능을 지원

naver1.png

  • Tex을 몰라도 사용가능
  • 텍 문법을 어느정도 그대로 사용가능
  • 네이버 카페에 글 공유가능
  • 수식하나하나 칠때마다 한글과 비슷하게 수식기능을 따로따로 적용해야함(수식을 많이 쓸경우 불편)

naver2.png

Image

  1. 수식만 이미지로 변환후 첨부 (많은 블로그 수식지원이 작동하는 방식)
  2. 진짜 pdf를 그대로 이미지로 변환후 첨부하기

image1.png

하지만 pdf 나온 파일은 컴퓨터로 보기엔 많은 공백이 생겨서 가독성에 문제가 많음.

image2.png

(해봤는데 매우 귀찮습니다...)

  • 여기에 대한 해결책으로 ebook 용으로 만든 템플릿을 조금 수정한 텍 파일 template제안.
  • 해당 파일 원본
  • 사진 크기를 조정하는등 추가적인 수정은 필요
  • 패키지 충돌 등 사용못하는 기능이 몇 있음

Tex plugin

  • 해결법 수식 → tex로 자동 변환해주는 js 라이브러리 사용
  • 수식 문법을 쓰면 자동으로 변환해서 수식으로 보여줌
  • 실제 tex사용 환경과 문법이 미묘하게 다름

tistory, blogger와 직접 서비스 하는 사이트/블로그같은경우는 tex plugin을 사용가능. 현재 많이 쓰이는 tex plugin으로는 크게 두가지가있음.

MathJax vs KaTeX

  MathJax KaTeX 비고
기능 압도적으로 많음 상대적으로 적음  
랜더링 시간 김(비교) 짧음  
bus factor 5(1) 10(1)  
실 수식 표시의 차이 mathjax.png katex.png  
실 수식 표시의 차이

마우스 우클릭시 여러가지 추가지원이 있으며 수식이 페이지 규격을 넘어서서 나타난다.

mathjax2.png
mathjax3.png

KaTeX는 수식이 페이지 규격을 넘어서면 다음 줄에 이어서 나타난다.

katex2.png

 
  1. bus factor : 10번이상 commit한 사람으로 측정(실질적 영향력이 가장 큰 사람)

Github blog

직접 블로그를 만들어서 쓰기위해 여러가지 스태틱 웹사이트 제너레이터가 존재한다.

  • Jekyll
  • Hugo
  • Mkdocs...

 

  • 제한된 기능
  • 편의성
  • 직접 세팅
  • 파일로서 직접 소유

여기에 서버로서 github blog를 사용 할 수 있다.

  • 서버 유지 비용 X
  • 도메인 비용 X
  • 도메인 직접 설정가능

github blog과 jekyll로서 블로그 세팅을 하고 여기에 MathJax를 얹는 식으로 수식 지원을 하게 할 수 있다.

github blog 세팅은 굉장히 풀어져있는 자료정보가 많기에 각자 구글링에 맡기고 여기서는 MathJax 설정만 기술하도록 함.

참고 페이지

  1. _includes 폴더 밑에 Mathjax.html 파일을 만들고 다음 내용을 넣는다.
  2. _layouts 폴더 밑의 default.html 맨밑에 Mathjax.html을 인클루드한다. 이때 body문 안에서 위에 지정하는것이아닌 제일 마지막에 인클루드를 해준다.
  3. 마크다운을 kramdown로 세팅할 것. kramdown의 math blocks가 $$처리를 알아서 해준다.

<script type="text/javascript">
  window.MathJax = {
    tex: {
      packages: ['base', 'ams']
    },
    loader: {
      load: ['ui/menu', '[tex]/ams']
    },
    startup: {
      ready() {
        MathJax.startup.defaultReady();
        const Macro = MathJax._.input.tex.Symbol.Macro;
        const MapHandler = MathJax._.input.tex.MapHandler.MapHandler;
        const Array = MathJax._.input.tex.ams.AmsMethods.default.Array;
        const env = new Macro('psmallmatrix', Array, [null, '(', ')', 'c', '.333em', '.2em', 'S', 1]);
        MapHandler.getMap('AMSmath-environment').add('psmallmatrix', env);
      }
    }
  };
</script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>

tex파일을 markdown으로

  • pandoc
  • 인터넷에 변환 사이트가 있음 그걸 이용하고 나머지는 수정. 



XE Login