[Tistory Tip]티스토리에 LaTex 수식 복사했는데 제대로 출력안되는 경우

티스토리 블로그에도 LaTex(레이텍, 라텍)를 이용한 수식 입력이 가능합니다.

 

수식 입력이 가능하도록 설정하는 방법은 여기 참조

LaText 수식 생성은 여기서 편하게 할 수 있음

 

그런데, 다른 데서 LaTex 수식을 복사해서 붙여 넣기 하면 수식이 제대로 안 나올 때가 있습니다. 

 

 

위에서 처럼 제대로 $$ 사이에 수식을 제대로 입력한 것 같은데, 미리보기로 보면 수식으로 변환되지 않고, 실제 저장해서 브라우저에서 봐도 수식으로 변환되지 않는 경우입니다.

수식으로 보여야되는데 LaTex 표현식이 그대로 보입니다.

 

 

이렇게 된 이유 및 해결책은 HTML 모드에서 보면 알 수 있고 해결할 수 있습니다.

 

 

HTML모드로 작성된 내용을 보면, 이렇게 되어 있네요.

 

문제점이 파악되시나요?

 

<span>...</span>으로 둘러싸인 것이 문제입니다.

<p><span>m=\frac { 1 }{ N } \sum _{ i=1 }^{ N }{ { x }_{ i } }</span></p>

 

아래와 같이 <span>과 </span>을 없애면 문제는 해결됩니다.

<p>m=\frac { 1 }{ N } \sum _{ i=1 }^{ N }{ { x }_{ i } }</p>

<span>과 </span>을 없앤 모습

 

 

이제 미리보기로 보면, 제대로 수식이 출력됨을 확인할 수 있습니다.

 

문제의 원인은, 블로그 편집 창의 기본 모드에서는 안 보였지만, HTML 코드 내에서는 LaTex 수식의 앞 뒤로  <span> </span>이 있어서 제대로 동작되지 않았던 것입니다.

 

그럼, 이 "<span> </span>"은 왜 의도치 않게 붙어 있는 것일까요?

 

이것은, 티스트리 블로그 창에 직접 타이핑하지 않고, 다른 소스(다른 브라우저, 텍스트 에디터 등)에서 내용을 복사해서 붙여 넣기 할 때 생깁니다.  

 

따라서, 다른 곳에 있는 LaTex 수식을 써야하는 경우는, 직접 타이핑하거나, 아니면 복사를 HTML 모드에서 해야 합니다. 

 

---

예를 들어, ${ y\quad =\quad x }^{ 2 }\quad +\quad { y }^{ 2 }$ 수식을 'Daum Equation Editor' 페이지에서 만든 후, 티스토리 블로그에 집어넣어보겠습니다.

 

1. Daum Equation Editor에서 해당 수식에 대한 LaTex 표현식 생성

 

 

2. LaTex 수식을 복사한 후, 티스토리 블로그의 "HTML 모드"에서 붙여 넣기 수행

 

3. 기본 모드에서 수식의 앞뒤에 $$ 넣는다.  (줄 바꿈이 없이, 문장 내에 단어처럼 넣으려면 $로 감싸면 됨)

 

4. 미리보기로 보면 제대로 수식이 나오는 것을 확인할 수 있음

 

---

위에서처럼 HTML모드가 아닌 기본 모드에서 붙여 넣기 하고서 다시 HTML모드에서 보면 다음과 같은 형태가 됩니다. 그래서, 제대로 수식 출력이 안됩니다.

 

위 경우는 사실 공백 문자가 있어도 수식 출력은 제대로 됩니다. 그러나, 안 되는 경우가 있고, 되더라도 이처럼 쓸데없이 '&nbsp;'가 많아져서 페이지 코드가 커지고 복잡해집니다. 

 

따라서, 다른 웹페이지나 텍스트 에디터에 있는 LaTex 수식을 복사해서 올 때는, HTML 모드에서 붙여 넣기하는게 좋고, 만약 기본 모드에서 붙여넣기 했다면, 꼭 HTML 모드에서 내용을 확인해서, 불필요한 <span> 혹은 공백 문자(&nbsp;)를 제거해주는 게 좋습니다.

 

-끝-