공지

마크다운 사용법

by 조윤진  /  1년 전
최초 작성: 2022-12-17 02:48:15
마지막 수정: 2024-01-15 17:49:30
 /  N/A  /  N/A

wysiwig 에디터(다른 게시판 사이트에서 글쓰기 하면 나오는 에디터) 도입하기 귀찮아서 그냥 마크다운 문법을 가져다가 적용했다.
위키 편집해본 사람이라면 이런 느낌으로 문법 적용해서 글 쓰는 게 위키 편집이랑 비슷하다는 걸 알 것이다.
참고로 여기서 「비표준」이란 commonmark 표준에 정의되지 않았거나 일부 파서에서만 사용되는 경우, 혹은 내가 맘대로 만든 경우(?)를 말한다.

제목

# h1

## h2

### h3

#### h4

##### h5

###### h6

결과물:

h1

h2

h3

h4

h5
h6
h1
===

h2
---

결과물:

h1

h2

문단 분리/일반 줄바꿈

문단1

문단2

결과물:
문단1

문단2

문장\
그냥 엔터

결과물:
문장
그냥 엔터

텍스트 강조

**굵은 글씨**와 **굵은 글씨**

결과물:
굵은 글씨굵은 글씨

*기울어진 글씨*와 _기울어진 글씨_

결과물:
기울어진 글씨기울어진 글씨

**_굵고 기울어진 글씨_**와 **_굵고 기울어진 글씨_**

결과물:
**굵고 기울어진 글씨**와 굵고 기울어진 글씨

HTML 주석

<!-- HTML 주석 -->

결과물:

(아무것도 안 보일 건데, 주석이기 때문에 당연한 결과다.)

밑줄

++밑1줄++ <!-- 비표준이다. -->

결과물:
밑1줄

구분선

---
---
***** <!-- 갯수 무관 -->

결과물:




글자 색/글자 크기

{#ff0000}(색) <!-- 비표준이다. -->

결과물:

{+9}(큰1글1씨) <!-- 9단계까지 지원. 비표준이다. -->

결과물:
큰1글1씨

{-9}(작1은글1씨) <!-- -9단계까지 지원. 비표준이다. -->

결과물:
작1은글1씨

{+5#f00}(강조)되고 {+5#f0f}(반복)되는 소리는 강아지를 {+5#adc7e2}(불안)하게 해요

결과물:
강조되고 반복되는 소리는 강아지를 불안하게 해요

형광펜 강조

==형1광1펜== <!-- 비표준이다. -->

결과물:
형1광1펜

취소선

~~취소선~~ <!-- 비표준이다만, github에서도 쓸 수 있다. -->

결과물:
취소선

첨자

위첨자

2^3^

결과물:
23

아래첨자

log~2~8

결과물:
log28

각주

<!-- 비표준이다만, github에서도 쓸 수 있다. -->

[^각주이름]  
[^각주이름]

[^각주이름]: 각주 내용

결과물:
[각주이름]
[각주이름]

일반 각주의 이름에는 띄어쓰기가 들어갈 수 없다.

inline 각주

<!-- 비표준이다. -->

^[inline 각주 1]

결과물:
undefined

<!-- 살짝 나무위키 느낌을 더한 버전. 역시나 비표준이다. 저 위에 일반 각주랑 차이점은 ^ 뒤에 띄어쓰기가 있다는 것. -->

[^ inline 각주 2]

결과물:
[1]

추가사항: inline 각주는 이름을 지을 수 없으며, 각주의 이름을 지으려면 저 위에 있는 일반 각주를 써야 한다.

각종 컨테이너

:::folding 스포주의 <!-- 비표준이다. -->
그런데... **그것이 실제로 일어났다!!!**
:::

결과물:

스포주의

그런데... 그것이 실제로 일어났다!!!

:::ignore-md
**마크다운** 문법 _무시_ <!-- 비표준이다. -->
:::

결과물(여기서는 주석도 안 먹힌다):

**마크다운** 문법 _무시_ <!-- 비표준이다. -->

인용문

> 명1언

결과물:

명1언

소스코드

`System.out.println();`

결과물:
System.out.println();

```rust
fn main(){
    println!("소스코드");
}
```

결과물:

fn main(){
    println!("소스코드");
}
```javascript
$(document).ready(function () {
    console.log('소스코드');
});

결과물:

```javascript
$(document).ready(function () {
    console.log('소스코드');
});

앵커 생성

<!-- <div id="someAnchor"></div> 를 생성 -->
[@anchor('someAnchor')]

결과물: (밑에 있는 링크 예제에서 #someAnchor를 클릭하면 여기로 올 수 있다.)

앵커 관련 추가사항

  1. 모든 각주에는 자동으로 fn- 으로 시작하는 앵커가 생성됩니다.
  2. 본문의 모든 각주 자리에는 자동으로 fnref- 으로 시작하는 앵커가 생성됩니다.

외부 링크

<https://github.com/kmoon2437>

결과물:
https://github.com/kmoon2437

[url 주소](https://www.joysound.com/web/search/song/911622)
[#someAnchor](#someAnchor) <!-- id 값이 someAnchor인 곳으로 이동 -->

결과물:
url 주소 #someAnchor

이미지

![이미지](https://static.choyunjin.kr/media/images/suzuka/suzuka_2023_sr.webp)

결과물:
이미지

이미지+링크

[![이미지](https://static.choyunjin.kr/media/images/suzuka/20231205_041244.jpg)](https://umamusume.jp/character/detail/?name=silencesuzuka)

결과물:
이미지


댓글