블로그에 MathJax 적용시키기

웹/JS 2017. 1. 3. 09:53

이전까지는 블로그에 수학 수식을 보여주기 위해 이미지를 복사하거나 업로드했지만 너무 비효율적이라고 생각해서 다른 방법을 찾게 되었고 MathJax라는 것을 알게 되었습니다.


MathJax는 HTML 문서에서 수학 수식을 표현할 수 있게 해주는 오픈소스 스크립트라고 합니다.


그리고 수식 입력은 LaTeX나 MathML로 할 수 있습니다.


적용 방법은 간단합니다. <head>...</head> 사이에 아래 코드를 삽입하면 됩니다.


<script type="text/x-mathjax-config"
      MathJax.Hub.Config({
	      tex2jax: {
		      inlineMath: [['$','$'], ['\\(','\\)']]
      }
</script>
<script type="text/javascript" 
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

여기서 중요한 것은 x-mathjax-config 가 MathJax.js 파일을 호출하는 코드보다 위에 있어야 한다는 것입니다.


x-mathjax-config는 MathJax를 사용할 때 설정 등을 할 수 있는 부분입니다.


기본적으로 MathJax를 사용하면 자동으로 줄바꿈이 됩니다. 그래서 줄바꿈을 하고 싶지 않다면 위와 같이 설정해주어야 합니다.



실제로 사용할 때 줄바꿈을 하고 싶다면 $$ x = 0 $$ ($$ 로 수식을 감싸면 됨)과 같이 하고 쭉 이어서 쓰고 싶으면 $ x = 1 $ ( $ 로 수식을 감싸서)로 하면 됩니다.


만약 MathJax가 제대로 적용이 되지 않는다면 편집기 말고 HTML 모드로 들어가서 $ $ 사이에 다른 내용들이 없는지 확인합니다. 저 같은 경우에는 span 태그가 사이에 있어서 제대로 적용이 되지 않았었습니다.

'웹 > JS' 카테고리의 다른 글

[웹][JS] HTML 코드에서 스크립트의 위치  (0) 2016.10.26
블로그 이미지

NCookie

,

[티스토리] 인용문

웹/기타 2016. 11. 17. 14:43

http://fav76.tistory.com/182


참고

'웹 > 기타' 카테고리의 다른 글

Highlight.js 티스토리 Line Numbers 추가  (1) 2016.11.16
[웹] REST API란  (0) 2016.10.28
URL, URI 차이점  (0) 2016.10.24
블로그 이미지

NCookie

,

Highlight.js 티스토리 Line Numbers 추가

웹/기타 2016. 11. 16. 14:54

티스토리에 Highlihgt.js를 적용하는 방법은 


http://slaner.tistory.com/143


이 블로그에서 보고 하시면 될 것 같습니다.


제가 소개하려고 하는 것은 line number를 추가하는 것입니다.


hightlight.js에서는 기본적으로 line number를 지원하지 않기 때문에 fork 나 customizing된 소스를 사용해야 합니다.


그래서 방법을 찾다가 가장 간단한 방법을 소개하려고 합니다.




https://github.com/wcoder/highlightjs-line-numbers.js


여기에 들어가서 src/highlightjs-line-numbers.js 파일을 받습니다. 그리고 티스토리 HTML/CSS 편집에 들어갑니다. 


아마 위 블로그에서 따라했다면 highlight.js 파일을 불러온 html 코드가 있을 것입니다. 그 아래에 코드를 추가해줍시다.


script src="./images/highlight.pack.js"></script>
<script src="./images/highlightjs-line-numbers.js"></script>

<link rel="stylesheet" href="./images/darcula.css" />


<script>
	hljs.initHighlightingOnLoad();
	hljs.initLineNumbersOnLoad();
	$(document).ready(function() {
		$('code.hljs').each(function(i, block) {
			hljs.lineNumbersBlock(block);
		});
	});
</script>


css 부분에 아래 코드를 추가

.hljs-line-numbers {
    text-align: right;
    border-right: 1px solid #ccc;
    color: #999;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


이제 html 모드에서 다음과 같이 하면 됩니다.

<pre>
<code class="[강조할 언어]">
[소스코드]
</code>
</pre>



'웹 > 기타' 카테고리의 다른 글

[티스토리] 인용문  (0) 2016.11.17
[웹] REST API란  (0) 2016.10.28
URL, URI 차이점  (0) 2016.10.24
블로그 이미지

NCookie

,

[웹] REST API란

웹/기타 2016. 10. 28. 08:15
REST(REpresentational State Transfer)

- ROA(Resource Oriented Architecture)를 따르는 웹 서비스 아키텍처

- URI와 HTTP 메소드를 이용해 객체화된 서비스에 접근하는 것

- SOAP이 서비스 지향 구조인 것과 달리 자원지향구조(ROA: Resource Oriented Architecture)로 웹 사이트의 컨텐츠(Text, 이미지, 동영상), DB의 내용 등을 전부 하나의 자원으로 파악하여 각 자원의 고유한 URI(Uniform Resource Identifier)를 부여하고, 해당 자원에 대한 CRUD(Create, Read, Update, Delete) 작업을 HTTP의 기본 명령어인 POST, GET, PUT, DELETE를 통해서 처리함

- 대규모 네트워크 시스템을 위한 아키텍처

REST API

- REST 구조 스타일에 적합한 Web API를 REST API라고 함
- REST API를 제공하는 웹 서비스를 RESTful 하다고 함

REST API 설계



'웹 > 기타' 카테고리의 다른 글

[티스토리] 인용문  (0) 2016.11.17
Highlight.js 티스토리 Line Numbers 추가  (1) 2016.11.16
URL, URI 차이점  (0) 2016.10.24
블로그 이미지

NCookie

,

[웹][JS] HTML 코드에서 스크립트의 위치

웹/JS 2016. 10. 26. 18:38
▷ <head> ... </head>

-  웹 브라우저가 화면 표시를 끝내기 전에 자바스크립트로 사용자 화면의 일부 콘텐츠를 보여주거나 감추는 동작을 실행

- 이런 경우 자바스크립트 코드를 <body>…</body>에 포함했을 때 자바스크립트가 HTML보다 늦게 해석이 되면서 일시적으로 깨진 화면이 보일 수 있음 

- <head>…</head>에 포함된 자바스크립트는 HTML 문서보다 먼저 해석이 되지만 HTML 문서의 로딩이 완료된 이후에 실행하도록 코드를 작성해야 함


▷ <body> ... </body>

- 자바스크립트가 HTML 문서를 로딩하는 시점에 화면 표시를 위한 어떤 동작을 실행하지 않

-> HTML 문서의 <body>…</body> 요소에 포함하되 가장 아래쪽에 선언하는 것이 좋음

- 웹 브라우저는 HTML 코드와 자바스크립트 코드를 동시에 해석하지 않고 작성된 순서대로 해석하기 때문에 자바스크립트 코드를 나중에 해석하도록 하면 HTML 문서를 화면에 표시하는 속도가 빨라짐


'웹 > JS' 카테고리의 다른 글

블로그에 MathJax 적용시키기  (0) 2017.01.03
블로그 이미지

NCookie

,

URL, URI 차이점

웹/기타 2016. 10. 24. 15:50
URL(Uniform Resource Locator) 

네트워크 상에서 자원이 어디있는지 가리킴
ex) http://test.com/work/sample.pdf



URI(Uniform Resource Identifier)

인터넷에 있는 자원을 나타내는 유일한 식별자



예시
1) rewrite 기술을 사용하여 만든 의미있는 식별자
http://test.com/company/location


2) REST 서비스 (uri로 실행되는 서비스)

http://service.com/tv/turn/on


3) Web-oriented architecture (웹 기반의 구조문법) 

kakaotalk://sendmsg?text=hello!  (이 uri는 kakaotalk 프로토콜을 해석할 수 있는 프로그램이 핸들링한다. 해당프로그램은 sendmsg 라는 식별자를 해석하고 동작한다.)

facebookmsg://like?url=mysite.com (이 uri는 facebookmsg 프로토콜을 해석할 수 있는 프로그램이 핸들링한다. 해당프로그램은 like 라는 식별자를 해석하고 동작한다.)


URL, URN은 URI에 포함됨


'웹 > 기타' 카테고리의 다른 글

[티스토리] 인용문  (0) 2016.11.17
Highlight.js 티스토리 Line Numbers 추가  (1) 2016.11.16
[웹] REST API란  (0) 2016.10.28
블로그 이미지

NCookie

,

공지사항

최근에 받은 트랙백

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바