Markdown 이미지파일 URL 경로에 띄어쓰기가 있는 경우

Markdown 이미지 삽입 포스팅처럼 md 어법으로 이미지를 삽입하다가 한가지 난관에 부딛혔다.

공백

image url에 공백이 들어간 것.

※ 현재 hexo 랜더러를 kramed로 변경한 상태라 아래처럼 공백도 인식한다.

  • 마찬가지로 hexo 기본 내장 tag 플러그인 어법으로 블로그 포스트는 해결 가능

우린 답을

1
![우린 답을](\images\2111\md url blank\interstellar poster.png)

하지만 ipynb 형식 등 개발환경에서 md 셀을 사용할 때는

jupyter

여전히 발생하는 문제다.

html처럼  를 공백 대신 넣어보기도 하고 cmd 마냥 ""로 묶는 등 코랄을 했지만 markdown 어법으로는 해결하지 못했다.

markdown이 html 어법도 지원하는걸 기억하고 html img 태그로 해결했다.

찾을 것

1
<img src="\images\2111\md url blank\interstellar poster.png" alt="찾을 것">

html 어법을 사용하면 md로 구현 가능한 하이퍼링크 <a href=""></a> tag는 당연하고
가운데 정렬(<center></center>)부터 이미지 크기 변경이 가능한 img 태그 size 요소 등 풍부한 표현이 가능하다.

markdown 수식 넣기

mathjax

Markdown에서는 $x^2$처럼 수식을 사용할 수 있는 mathjax 플러그인이 내장되어있다.

블럭 지정

수식을 사용하기 위해 아래와 같이 식 앞 뒤로 $문자를 넣어줘야한다.

1
$math$

$math$

아래 처럼 $ 문자를 2개 넣는 경우도 있는데,

1
$$math$$

이 경우엔 text 사이에 수식을 삽입하는게 아닌 따로 표현하는 경우에 주로 사용된다.

첨자

수학에서 행의 i번째 속성을 가리키거나 x의 n 제곱을 표현할 때 첨자를 주로 사용한다.

1
$x_i^n$

$x_i^n$

  • 아래첨자: _
  • 위첨자: ^

중괄호

x의 12제곱을 표현하기 위해 단순히 $x^12$만 입력하게 된다면

$x^12$처럼 문자 1개만 위첨자로 처리된다.
이를 해결해주는 문법이 중괄호( { } )다.

1
$x^{12}$

$x^{12}$

단, 중괄호를 mathjax에서 하나의 문자열로 처리하기 위해 사용되므로 중괄호를 사용하는 식에서는 escape(\)로 문법 인식이 아닌 문자 인식으로 바꿔줘야한다.

1
$x_5 = [[\{(x_1)+x_2\}+x_3]+x_4]$

Hexo: 중괄호를 표현하기 위해선 \를 중첩 사용한다.
hexo 수식 사용하기

1
$x_5 = [[\\{(x_1)+x_2\\}+x_3]+x_4]$

$x_5 = [[\{(x_1)+x_2\}+x_3]+x_4]$

행렬 형식

2속성만 넣을 경우

1
$$v{x \choose 0}$$

기본 형식 array행렬 & 괄호 크기 변경

1
2
3
4
5
6
7
$$
X\Bigg\{
\begin{array}{c}
x_{1}\\
x_{2}
\end{array}
$$

P-matrix

1
2
3
4
5
6
7
8
9
10
11
$$
L=
\begin{pmatrix}
b_1 & b_2 & b_3 & \cdots & b_{n-1}& b_n\\
s_1 & 0 & 0 & \cdots & 0 & 0\\
0 & s_2 & 0 & \cdots & 0 & 0\\
0 & 0 & s_3 & \cdots & 0 & 0\\
\vdots&\vdots&\vdots& \ddots & \vdots &\vdots\\
0 & 0 & 0 & \cdots & s_{n-1}& 0\\
\end{pmatrix}
$$

B-matrix

1
2
3
4
5
\begin{bmatrix}
2 & 1 &-1\\
1 & 0 & 5\\
-1 & 3 &-2
\end{bmatrix}

행렬에 세로 줄 넣기

1
2
3
4
5
6
7
8
9
$$
\left[
\begin{array}{ccc|c}
2 & 1 &-1 & 3\\
1 & 0 & 5 & 1\\
-1 & 3 &-2 & 0
\end{array}
\right]
$$

V-matrix

1
2
3
4
5
6
7
$$
\begin{vmatrix}
a & b\\
c & d
\end{vmatrix}
=ad-bc
$$

연립 방정식

1
2
3
4
5
6
7
$$
\begin{cases}
v_1 = 3i+2k\\
v_2 = 2j+k\\
v_3 = i+j+k
\end{cases}
$$

특수문자

수식에서 사용되는 곱셈 나눗셈부터 pi ohm과 같은 특수문자를 삽입하기 위해선 중괄호 경우처럼 \를 사용해야한다.

1
2
3
4
5
$$
(\hat i\cdot\hat i)\div n \\
= \frac{\vert\hat i\vert\times\vert\hat i\vert cos\theta}{n}\\
= \frac{\vert\hat i\vert^2\times 1}{n} = \frac 1n
$$

특수문자는 굉장히 다양하므로 삽입하고자 하는 문자를 LaTex(혹은 Mathjax) 검색어에 붙여 검색하자.

Markdown 하이퍼링크 이미지 넣기

URL 넣기

URL 단순 입력

단순히 표현하고 싶은 url을 붙여넣으면 아래처럼 해당 text가 url로 링크된다.
엘든링? https://en.bandainamcoent.eu/elden-ring/elden-ring

1
엘든링? https://en.bandainamcoent.eu/elden-ring/elden-ring

URL 삽입

하지만 아래처럼 url 뒤로 띄어쓰기가 없을 경우 < , >로 묶어줘야 정확한 URL 표시가 가능하다.
엘든링 https://en.bandainamcoent.eu/elden-ring/elden-ring엘?든링

1
엘든링 <https://en.bandainamcoent.eu/elden-ring/elden-ring>엘?든링

텍스트 하이퍼링크

특정 텍스트에 URL을 링크하는 text href를 사용하고 싶을 경우엔 [text](URL) 형식으로 작성하면 된다.

엘?든?링?

1
[엘?든?링?](https://en.bandainamcoent.eu/elden-ring/elden-ring)

URL 참조

하나의 URL을 여러번 사용해야할 때 참조 URL을 익혀두면 편하다.

엘든링엘든링?엘?든?링엘?
든?
링?

엘든링!
22년 2월 25일 대발매

1
2
3
4
5
6
7
[엘든링][ER][엘든링?][ER][엘?든?링][ER][엘?
든?
링?][ER]
[엘든링!][ER]
[22년 2월 25일 대발매][ER]

[ER]: https://en.bandainamcoent.eu/elden-ring/elden-ring

이미지 삽입

이미지 삽입은 Href 형식 앞에 !를 붙여 ![alt](URL)로 작성한다.

Elden Ring

1
![Elden Ring](https://p325k7wa.twic.pics/high/elden-ring/elden-ring/00-page-setup/eldenring_new.png?twic=v1/cover=800x267/step=10/quality=80)

이미지 하이퍼링크

그럼 이미지에 링크를 넣는 방법은 어떻게 해야할까?

이미지 표현문을 [ , ]로 묶어 text 처럼 표현하고 그 뒤에 href를 작성하면 된다.
ex) [![alt](URL)](Href)

엘든링 보러가기

1
[![엘든링 보러가기](https://p325k7wa.twic.pics/high/elden-ring/elden-ring/00-page-setup/eldenring_new.png?twic=v1/cover=800x267/step=10/quality=80)](https://en.bandainamcoent.eu/elden-ring/elden-ring)

Hexo local image 삽입하기

참조