Jekyll과 함께 MathJax 사용

Jekyll과 함께 MathJax 사용

---

Jekyll 블로그가 있고 MathJax를 함께 사용하고 싶습니다. 다음과 같은 내용을 입력 할 수 있기를 원합니다.

$$\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}$$

내 마크 다운 파일에서 Math.stackexchange 에서 수행되는 방법과 유사한 방식으로 MathJax로 생성 된 올바른 LaTeX 표현식이 있습니다.

이를 수행하는 가장 쉬운 방법은 무엇입니까? 현재 내 디렉토리에 jsmath.js (GitHub 요점) 파일이 mathjs있으며 내 _includes디렉토리에 다음 줄 이있는 간단한 파일이있을 수 있다고 생각 했습니다.

<script src="path/to/jsmath.js></script>

다음을 통해 각 게시물에 포함

{% include mathjs %}

그러나 이것은 작동하지 않는 것 같습니다 jekyll --server. 페이지를 실행할 때 페이지가 생성되지만 내용이 보이지 않습니다.

이 일에 대해 올바른 방향으로 가고 있습니까? Jekyll과 함께 MathJax를 사용하는 더 좋은 방법이 있습니까?

---

확실히 Jekyll과 함께 mathjax를 사용할 수 있습니다. 이 작업을 수행하려면

1. 마크 다운으로 게시물을 작성하는 경우 마크 다운 인터프리터가 mathjax 입력을 망치지 않습니다. 내가 찾은 가장 좋은 방법은 항상 <div>요소 에 디스플레이 수학을 넣고 요소에 인라인 수학을 넣는 <span>것입니다. 대부분의 마크 다운 인터프리터는 그대로 둡니다.

2. javascript 행이 html 소스에서 올바르게 표시됩니까? 내 사본을 제공하는 것보다 mathjax CDN을 가리키는 것이 더 쉽고 빠릅니다. 라인을 사용해보십시오

   <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

(이러한 구성 옵션을 사용하면 더 많은 tex 표기법을 사용하여 등의 수학 환경을 시작할 수 있습니다 \begin{equation}.)

jsmath.js스크립트에 문제가있을 수 있습니다. CDN 버전이 더 빠르고 더 안정적 일 것입니다. (모든 페이지의 바닥 글에 자바 스크립트로드가 있지만 필요하지 않을 때 자바 스크립트를로드하지 않으려는 경우 포함하는 전략이 의미가 있습니다.)

블로그 링크를 제공 해주시면 더 많은 도움을 드릴 수 있습니까? 내 블로그에서 몇 가지 예 를 볼 수 있습니다 (도움이된다면 github에서도 Jekyll 설정 링크가 있음).

---

게시 프로세스를 충분히 제어 할 수있는 경우 (예 : Jekyll을 직접 실행하는 경우) 쉬운 해결책 은 마크 다운 파서를 TeX를 지원하는 파서로 전환하는 것입니다. 예를 들어, kramdown 사용 :

gem install kramdown

markdown라인을 다음 _config.yml으로 변경

markdown: kramdown

다음과 같은 추가

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

에 _layouts/default.html. 이제 게시물의 모든 수학에$$ .

---

kramdown마크 다운 맛 으로 사용 하는 경우 쉽습니다. Kramdown은 mathjax.

1. </head>기본 레이아웃 의 태그 앞에 추가하십시오 .

   <script type="text/javascript" async 
   src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?
   config=TeX-AMS-MML_HTMLorMML"></script>
   

2. 줄 _config.yml뒤의 에서 이것을 true로 설정하십시오 markdown: kramdown.

   mathjax: true
   

3. 끝난. Mathjax를 개선하기 위해

   • 인라인, 사용 \( ... \),

   • 블록, \[ ... \].

     피려 할 수있는 유일한 것은 가격 인하를 사용할 때 구분이 될 수 있도록, 백 슬래시의 탈출입니다 \\( ... \\)및 \\[ ... \\]각각 인라인 및 블록 수학에 대한.

4. 다음은 MathJax 인라인 렌더링 의 예 이고 다음은 \\( 1/x^{2} \\)블록 렌더링 \\[ \frac{1}{n^{2}} \\]입니다.

내 블로그에서 사용합니다.

---

얼마 전에 MathJax 설정에 대한 블로그 게시물을 작성했습니다. Latex Math Magic

본질적으로 Markdown 이 MathJax 를 엉망 으로 만드는 것을 막아야합니다.

나는 결국 잘 작동하는 코드 블록을 사용했습니다. 따라서 무언가를 쓰기 전에 최소 4 개의 공백을 사용하거나 예음 기호를 사용하십시오. `; 안타깝게도 MathJax는 <code>코드를 변환해서는 안되는 코드를 변환하지 않기 때문에 기본적으로 태그를 건너 뜁니다 .

따라서 메인 레이아웃 파일 어딘가에 약간의 자바 스크립트 코드를 추가해야합니다.

MathJax.Hub.Config({
  tex2jax: {
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
  }
});

또한 MathJax에 비 라텍스 코드 블록 또는 일반 코드 블록을 무시하도록 지시해야합니다.

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';
    }
});

그의 시점에서 우리의 모든 라텍스 코드 블록은 클래스 이름에 has-jax 문자열을 가질 것입니다. 따라서 CSS 시트에 간단한 스타일을 적용하여 고유 한 스타일을 지정할 수 있습니다.

code.has-jax {font: inherit; font-size: 100%; background: inherit; border: inherit;}

최선의 접근 방식은 아닐 수도 있지만 지난 몇 년 동안 내 블로그에서 효과가 있었고 더 이상 문제가 발생하지 않았습니다.

---

내 정적 블로그 생성기를 사용해 볼 수 있습니다 : Jekyde . Jekyde는 Jekyll과 유사하지만 Markdown 파일에서 LaTeX를 잘 처리합니다. 수식을 $ ... $ 및 $$ ... $$ 안에 넣으면됩니다. 또한 Jekyde에는 LaTeX 미리보기가있는 브라우저에 마크 다운 편집기가 포함되어 있습니다.

---

다음 옵션 중 하나를 시도하기 전에 몇 가지 참고 사항

옵션 0은 빌드 시간을 늘리고 --incremental실제로 옵션 1은 대부분의 경우에 사용되어야 하지만 CDN에 액세스 할 수없는 클라이언트가있는 네트워크에 배포하는 경우 차지하는 추가 공간과 함께 비용의 가치가있을 수 있습니다.

두 옵션 모두 kramdown마크 다운 인터프리터로 개인 서버에서 테스트되었으며 mathjax: true프로젝트 _config.yml파일 내에 설정되었습니다 . 참조 단계 2Soham Bhattacharyya의 의 대답과 서문, 그리고 개까지 Caramdir '는 어떻게에 그 비트에 대한 처음 두 코드 블록이야.

0압축을 푼 소스를 옵션 다운로드 및 복사project-name

1. 소스 다운로드

cd ~
mkdir -p git/hub && cd git/hub
git clone --depth 1 https://github.com/mathjax/MathJax.git

2. 프로젝트의에서 디렉토리 경로를 확인하고 파일을 복사 MathJax/unpacked이 경로에

cd ~
mkdir -p git/lan/project-name/assets/JS_3rd_Party/MathJax
cp -r git/hub/MathJax/unpacked/* git/lan/project-name/assets/JS_3rd_Party/MathJax/

3. git추적에 소스 추가

cd git/lan/project-name/
git add assets/JS_3rd_Party/MathJax
git commit -m 'Added MathJax.js unpacked source to git tracking'

4. 포함 파일 작성

tee ./_includes/MathJax.html 1>/dev/null <<EOF
{%- if jekyll.environment == 'production' and site.mathjax == true -%}
  <script type="text/javascript" src="{{'/assets/javascripts/JS_3rd_Party/latest.js?config=TeX-AMS-MML_HTMLorMML' | relative_url}}"></script>
{%- elsif jekyll.environment != 'production' and site.mathjax == true -%}
  <script type="text/javascript" src="{{'/assets/javascripts/JS_3rd_Party/MathJax.js?config=TeX-AMS-MML_HTMLorMML' | relative_url}}"></script>
{%- endif -%}
EOF

사설 서버 빌드는 위의 Liquid ... ... 문을 MathJax.js사용 latest.js하여 프로덕션 환경 (GitHub)에서 사용할 위치를 사용합니다 .ifelsifendif

5. 테스트 할 게시물 작성

tee ./_posts/$(date +'%Y-%d-%m')-math-tests.markdown 1>/dev/null <<EOF
---
layout: post
title:  "Math Tests"
date:   $(date +'%Y-%d-%m %H:%M:%S %z')
categories: math
---
{%- include MathJax.html -%}

<span>

for $x,y,z \in \{1, 2,\dots 9\}$
</span>

<span>

$$
\sum_{i=1}^n X_n
$$
</span>
EOF

I've not tried it without <span>s because cboettig's suggestion seems to totally do the trick. Additionally that extra new-line within spans are no mistake, without'em there where still issues with rendered output.

6. Add these latest files to git tracking

git add _posts/$(date +'%Y-%d-')math-tests.markdown
git add _includes/MathJax.html

7. Build locally, or push and build on a remote server

bundle exec jekyll build --destination /tmp/www/project-name --config _config.yml --incremental

---

Option 1 copy just latest.js to use a CDN (Content Delivery Network)

1. See Option 0 step 1.

2. Make a directory path for third party JavaScripts and copy MathJax/unpacked/latest.js there

cd ~
mkdir -p git/lan/project-name/assets/JS_3rd_Party/MathJax
cp git/hub/MathJax/unpacked/latest.js git/lan/project-name/assets/JS_3rd_Party/MathJax/

3. Write an include file

cd git/lan/project-name
tee ./_includes/MathJax.html 1>/dev/null <<EOF
<script type="text/javascript" src="{{'/assets/javascripts/JS_3rd_Party/latest.js?config=TeX-AMS-MML_HTMLorMML' | relative_url}}"></script>
EOF

4. See Option 0 Step 5.

5. Add these three files to git tracking

git add _includes/MathJax.html
git add _posts/$(date +'%Y-%d-')math-tests.markdown
git add assets/JS_3rd_Party/MathJax
git commit -m 'Added `MathJax.html`, `latest.js`, and a test post to git tracking'

6. See Option 0 Step 7. for building locally

---

For either of the options

If deploying on a private server you may also need to define baseurl within your project's _config.yml file, especially if emulating the username.tld/project-name URL scheme that GitHub uses on your private server.

If deploying to both a private server and GitHub it may be better to use a separate config file and when building issue --config _config.yml,_config_baseurl.yml, eg...

# Write the special config file
tee ./_config_baseurl.yml 1>/dev/null <<EOF
baseurl: "project-name"
EOF

# Build with extra config
bundle exec jekyll build --destination /tmp/www/project-name --config _config.yml,_config_baseurl.yml --incremental

Hope that helps with loading assets via an include.

참고URL : https://stackoverflow.com/questions/10987992/using-mathjax-with-jekyll