기여

편집기 도움말


일반 마크다운 문법

코드 구문

인라인으로 inline code 특정 토큰을 강조 할 수 있습니다.

인라인으로 `inline code` 특정 토큰을 강조 할 수 있습니다.

코드 블록

var str = "blocked code";
```js
var str = "blocked code";
`` `

위처럼 백틱 3개로 블록을 만들어 코드를 여러줄 삽입 할 수 있습니다. 또한 각종 언어(위에서 js)의 코드를 하이라이팅 할 수 있습니다. 백틱 3개로 블록을 열고 뒤에 언어를 지시합니다. 생략하는 경우엔 기본값으로 js가 적용됩니다. 아래 언어나 마크업, 텍스트 포맷의 하이라이팅을 지원하합니다.

html, css, js, sass, c, c#, c++, bash, diff, python, docker, f#, go, git, http, java, json, php, powershell, jsx, tsx, ruby, scala, sql, yaml

목록

  • item 1
  • item 2
  • item 3
    • item 3.1
    • item 3.2
- item 1
- item 2
- item 3
    - item 3.1
    - item 3.2

번호가 없는 목록.

  1. item 1
  2. item 2
  3. item 3
    1. item 3.1
    2. item 3.2
1. item 1
1. item 2
1. item 3
  1. item 3.1
  1. item 3.2

번호가 있는 목록.
두 타입의 목록은 모두 들여쓰기(편집기에서 탭)를 통해 중첩이 가능합니다.

링크

Link to Codeflow

[Link to Codeflow](http://codeflow.study "Caption")
[Link to Codeflow](http://codeflow.study)
http://codeflow.study

첫째 줄처럼 캡션을 포함하는 링크를 만들 수도 있고, 둘째 줄처럼 캡션을 생략 할 수 있습니다.
더 간단히 마지막 줄과 같이 URL만 입력해도 자동으로 인식하여 링크를 생성합니다.

외부 이미지 첨부

Google

![Google](https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png "Caption")

링크와 동일하지만 앞부분에 느낌표가 삽입됩니다.
강의 교재를 작성하는 경우에는 이처럼 외부 파일을 참조하기 보다는, 편집기의 파일 업로더를 이용해 파일을 업로드하고 아래에서 소개하는 바처럼 직접 첨부하시길 바랍니다.

문장 및 단어 강조

진하게
기울게
밑줄
강조
취소선
아래첨자: H2O
위첨자: 19th

**진하게**
*기울게*
++밑줄++
==강조==
~~취소선~~
아래첨자: H~2~O
위첨자: 19^th^

축약어

HTML 스펙은 W3C 가 관리합니다…

*[W3C]:  World Wide Web Consortium
*[HTML]: Hyper Text Markup Language

위처럼 약어를 작성해두면 해당 약어에 툴팁이 생성됩니다.

각주

각주는[1] 여러번[1] 반복해서 참조 할 수 있으며, 각주의 해설은 문서 제일 하단에[2] 모두 모아서 첨부됩니다.

이렇게 각주 해설을 작성한 위치보다 이전이나[2] 이후에도[1] 각주를 참조 할 수도 있습니다.

(이 라인은 각주 해설이 아닙니다.)

각주는[^각주1] 여러번[^각주1] 반복해서 참조 할 수 있으며, 각주의 해설은 문서 제일 하단에[^각주2] 모두 모아서 첨부됩니다.

[^각주1]: 각주의 키가 되는 문자는 임의로 할 수 있습니다. 모든 각주는 각주 해설이 작성된 위치에 관계 없이 문서내 모든 위치에서 참조가 가능합니다.

이렇게 각주 해설을 작성한 위치보다 이전이나[^각주2] 이후에도[^각주1] 각주를 참조 할 수도 있습니다.

[^각주2]: 또한 각주의 해설 역시 ==마크업==이 가능하며,
    여러줄로,
작성 될 수 있습니다.
이 때는 이어지는 각주 해설의 첫줄에 들여쓰기를 해줄 필요가 있습니다.

(이 라인은 각주 해설이 아닙니다.)

인용

인용 구문을 인용…

> 인용 구문을 인용...

H1H2H3
C1C2C3
C4C5C6
|H1|H2|H3|
|--|--|--|
|C1|C2|C3|
|C4|C5|C6|

열이나 행을 합칠 수는 없습니다.

단락 분리


---

단순한 구분자입니다.

Codeflow 전용 문법

참조하기

회원은 @김동욱 @user:1로 참조하며, 작성시 @회원 이름을 통해서 자동 완성이 지원됩니다. 이때 언급되는 회원에게는 알림이 갑니다.
강의는 @추상화 @course:51로 작성합니다.
커리큘럼은 @웹 풀스택 입문@course:web-deprecated로 참조합니다.
커리큘럼과 강의를 동시에 @웹 풀스택 입문 @course:web-deprecated:1로 참조합니다.
게시물은 @Codeflow가 나아갈 방향과 앞으로의 강의 계획. @comment:492로 참조합니다.

파일 첨부

mollymolly

{@file:59?width=320&center}

파일은 편집기의 파일 첨부 기능을 통해서 업로드 할 수 있습니다.
업로드된 파일을 선택하면 위와 같이 내용에 삽입되며 width, height, center를 옵션으로 줄 수 있습니다.
이미지, 영상 등 파일의 타입에 따른 요소로 삽입됩니다.

코드 실행기 (jsfiddle)

{@jsfiddle:https://jsfiddle.net/benzen9113/e03mo6ro/?tabs=js,html,css&height=300}

JsFiddle의 URL을 그대로 삽입합니다. 삽입될 iframeheight, 그리고 tabs=js,html 같이 필요한 탭과 그 순서를 옵션으로 넘겨줄 수 있습니다.

코드 탐색기 (github)

code-explorer examplecode-explorer example

code-explorer example2code-explorer example2

{@code:https://github.com/dehypnosis/codeflow-example-code/commit/161be507fc3925837b955315dbcb2e36bf5ed58f?files=README.md,index.js}

GitHub에 저장된 public git 저장소의 특정 커밋에 대한 코드 탐색기를 삽입합니다. 이때 URL은 github 웹사이트의 커밋 조회 페이지의 URL을 그대로 삽입하면 됩니다.
?files=README.md,some/dir/file.js처럼 쿼리스트링를 통해서 기본으로 열어둘 파일을 옵션으로 전달 할 수 있습니다.

이때 REF가 master, canary, tag1 등 REF의 실제 SHA 값과 동일하지 않은 경우(heads or tags)에는 코드플로우 API 서버가 데이터를 캐싱하지 않으므로, 응답 속도가 늦어질 수 있습니다. 따라서 강의 저작시에는 REF의 고정된 SHA값을 정확히 입력하는 편이 좋겠습니다.

code-explorer example3code-explorer example3

동일한 문서에 동일한 저장소의 커밋을 여러개 삽입하면 diff 기능이 자동으로 활성화됩니다. 이때 커밋을 시간순으로 순서대로 삽입하는 경우에만 diff 기능이 활성화됩니다.

Codeflow 강의 전용 문법

구독자 전용 제한선 (비활성화됨)

---truncated---

모든 강의에는 제한선을 필수로 삽입해야 합니다.
위 제한선 이하의 내용은 구독자만 볼 수 있습니다.
제한 없이 모든 내용을 공개하려면 제일 하단에 제한선을 삽입하십시오.

(구독자 전용 제한선은 2019.02.08 이후로 비활성화됨)

강의 댓글

... {@comments:1,2,3}

회원이 게시된 강의의 특정 단락에 댓글을 작성하면 강의 소스코드의 해당 라인 끝에 자동으로 위 토큰이 삽입됩니다.
강의 내용을 업데이트하면서 단락의 내용 변경되어 댓글의 위치를 변경하려거나, 특정 의견이 강의에 방해가되어 제거하려면 토큰을 직접 수정 할 수 있습니다.
강의에서 게시물이 제거되어도 글이 삭제되지는 않으므로 포럼에서 확인 할 수 있습니다.


지원되지 않는 웹 브라우저거나 예기치 않은 오류가 발생했습니다.