Super Easy Edit (SEE | 엄청 쉬운 편집) of docuK (문서K: MarkDown | 마크다운): 사용 설명서.

# Super Easy Edit (SEE | 엄청 쉬운 편집) of docuK (문서K: MarkDown | 마크다운): 사용 설명서.

쉽게 문서를 작성합시다.

초록 | docuK (문서K) and SEE (엄청 쉬운 편집)

이것은 HTML 문서 편집 형식 중 하나인 문서K 입니다. 자바스크립트, jQuery (쉬운 자바스크립트 프로그래밍을 도와주는 API), MathJax (수식 처리기), google code prettifier (코드 예쁘게 출력해주는 API) 로 처리되는 문서 형식입니다.

문서K 의 특징은 다음과 같습니다.

• 선택 가능한 모드 (밝은 화면, 어두운 화면, 추가로 핑크도 구현할 예정), 글씨체 선택 가능.
• 글씨 크기 바꾸기 가능, 줄 간격 바꾸기 가능.
• 자동으로 만들어 주는 목차 (각 섹션, 하위 섹션으로 점프도 가능하고 각 섹션의 왼쪽 T 버튼을 누르면 목차로 이동됩니다.).
• 섹션들과 그림들 수식들 자동으로 숫자 이름 메겨주기.
• 참고 문헌 참조 (citing) 쉽게 하기, 팝업 형태로 참조한 문헌들 바로 보여주기.
• 그림이나 수식도 쉽게 참조 (refering) 하기. 팝업 형태로 참조한 그림 수식 바로 보여주기.
• ID 가 붙은 어떠한 원소들 (HTML elements with id) 도 참조 (refering with class="id") 가능.
• 데이터를 아끼고 전자기기의 과부하를 방지하기 위한, 지연 된 그림과 영상들 로딩.
• 자동적인 코드 출력 : `<codeprint id="code-id"></codeprint>` to `<pre id="pre-code-id"></pre>`. (기본적으로 docuK 는 여러 docuK 문서가 한 파일에 있을때 중복 된 아이디를 다르게 다루도록 id 뒤에 "-in-docuK-1" 같은걸 추가하는데 이 옵션을 끄려면, 빈 <script></script> SEE 코드 초반에 넣어주세요.)

라텍스 (LaTeX) 나 위키 편집 (Wiki edit) 과 비슷하지만 조금 더 확장된 버전이라고 생각하심 됩니다.

직접 시도해 보세요.

아래의 문서/문자들을 편집하고 문서K HTML 형태로 만들어 보세요. 문서K 는 이 문자들 아래에 표현될 겁니다. 단축키 Shift+Enter 를 이용하셔서 바로 문서가 만들어지게 할 수 있습니다. 전체 코드는 복사 및 붙여넣기 로 가셔서 완전한 독립형 코드를 보실 수 있습니다.

완전한 독립형 코드를 위해선 다음과 같은 메타 태그 (meta tag) <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 를 넣으시고 인코딩은 'utf-8' 로 하시는 것을 다언어 (한글 | 일어 | 중국어 | 인도어 | 아랍어 등) 지원을 위해 추천드립니다. 제대로 문서가 열리기 위해선 이 문서의 인코딩도 'utf-8' 로 저장되어야 합니다. 그리고 스마트폰에서도 잘 보이게 하기위해 다음과 같은 메타 태그 (meta tag) <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3, user-scalable=yes"/> 도 넣었습니다.

# 순수한 완전 쉬운 편집 (SEE: Super Easy Edit) 문서K (Markdown: 마크다운): 사용 설명서. 현재 문자들로부터 만들어진 HTML 문서K 가 보여지고 있는 중입니다. ## 문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명 문서K 의 특징은 다음과 같습니다.

• 선택 가능한 모드 (밝은 화면, 어두운 화면, 추가로 핑크도 구현할 예정), 글씨체 선택 가능.
• 글씨 크기 바꾸기 가능, 줄 간격 바꾸기 가능.
• 자동으로 만들어 주는 목차 (각 섹션, 하위 섹션으로 점프도 가능하고 각 섹션의 왼쪽 T 버튼을 누르면 목차로 이동됩니다.).
• 섹션들과 그림들 수식들 자동으로 숫자 이름 메겨주기.
• 참고 문헌 참조 (citing) 쉽게 하기, 팝업 형태로 참조한 문헌들 바로 보여주기.
• 그림이나 수식도 쉽게 참조 (refering) 하기. 팝업 형태로 참조한 그림 수식 바로 보여주기.
• ID 가 붙은 어떠한 원소들 (HTML elements with id) 도 참조 (refering with class="id") 가능.
• 데이터를 아끼고 전자기기의 과부하를 방지하기 위한, 지연 된 그림과 영상들 로딩.
• 자동적인 코드 출력 : `<codeprint id="code-id"></codeprint>` to `<pre id="pre-code-id"></pre>`.

라텍스 (LaTeX) 나 위키 편집 (Wiki edit) 과 비슷하지만 조금 더 확장된 버전이라고 생각하심 됩니다. ## PH ###/ Posting History 포스팅 역사기록을 위한 섹션. 이 섹션은 페이지를 처음 열땐 숨겨져 있습니다.

• 2023-09-26 : 업데이트.
• 2023-05-18 : 업데이트.
• 2014-06-18 : 첫번째 포스팅.

##/ Posting History ## COTD ###/ Categories of this document 이 문서의 카테고리가 여기에 쓰여집니다. 이 섹션도 초기엔 자동으로 숨겨져 있습니다.

• [IT/Programming] Category -- MarkDown: docuK SEE (Super Easy Edit)
• Recent interests

##/ Categories of this document ## 경고 이 데모 | 예제 에서는 문서K 및 SEE (완전 쉬운 편집) 의 몇가지 기능들이 제한될 수 있습니다. 지연된 로딩, 브라우저 정보, 코드 예쁘게 출력하기, 수식 출력하기, 추가로 초반에 한번만 실행되는 자바스크립트 코드 같은 것들은 제대로 동작하지 않을수도 있습니다. 여기서는 오직 m.docuKProcess() 함수만이 호출될 것이고, HTML 문서K 를 따로 작성하시거나 script 가 허용되는 블로그나 홈페이지 사이트에 이 문서K 및 SEE (완전 쉬운 편집) 문서를 올리실 경우에는 전체 기능들을 모두 제대로 사용하실 수 있을겁니다. ## TOC ##/ Table of Contents. 목차는 자동으로 채워집니다. 자세한 사항들은 뒤따라오는 섹션들에 설명되어 있습니다. ## 명령문 (Statement) 각각의 명령문 (Statement) 이나 문단은 두개의 엔터 이상으로 띄어져 있어야 합니다. 명령문의 처음에 '#' 이나 '<' 가 올 경우 특별하게 처리 됩니다. ## 문서K 와 섹션들 '#' 는 문서K 전체 제목을 의미합니다. 그리고 '##' | '###' | '####' 은 섹션 | 하위섹션 | 하하위섹션을 의미합니다. 문서K 의 마지막은 '#/' 로 표현하고, 섹션 | 하위섹션 | 하하위섹션의 마지막은 '##/' | '###/' | '####/' 로 표현되지만, 이걸 꼭 명시적으로 적으실 필요는 없습니다. ('#/' | '##/' | '###/' | '####/' are optional.) 문서 처리기가 알아서 계층 구조를 파악해 문서K | 섹션 | 하위섹션 | 하하위섹션의 끝을 감지합니다. ##[.class0#sec-Test] 클래스 (class) 와 아이디 (id) 를 가지는 섹션 섹션은 class 와 id 를 가질 수 있습니다. 아이디를 설정하면 이 아이디를 이용해 다음과 같이 <refer class="sec-Test"></refer>: Sec. 섹션을 참조할 수도 있습니다.

클래스 (Class) 와 아이디 (Id) 는 다음과 같은 [emmet 스타일] ##[.class0.class1.hiden#sec-Test] Section head 로 설정됩니다.

```[.lang-html] ##[.class0#sec-Test] Section with class and id ```/ ## 미리 정의된 섹션들: "PH", "COTD", "RRA", "TOC" 문서K SEE (완전 쉬운 편집) 에는 4가지 미리 정의된 섹션들이 있습니다. "PH": Posting History, "COTD":Categories of This Document, "TOC": Table of Contents, "RRA": References and Related Articles. 아래에서 미리 정의된 섹션들이 구현 된 것을 살펴보세요. 어떤식으로 동작 되는지 쉽게 파악하실 수 있을 겁니다. ##[.no-sec-N#sec-No-sec-numbering] 섹션 숫자로 표현 안하기 (class="no-sec-N") 섹션이 숫자로 표현되길 원하지 않으시면 다음과 같이 class 와 id 를 정하세요. ```[.lang-html] ##[.no-sec-N#sec-No-sec-numbering] No section numbering (class="no-sec-N") ```/ ###[#subsec-No-sec-numbering] 하위섹션 [.no-sec-N#sec-No-sec-numbering] ```[.lang-html] ###[#subsec-No-sec-numbering] 하위섹션 [.no-sec-N#sec-No-sec-numbering] ```/ ####[#subsubsec-No-sec-numbering] 하하위섹션 [.no-sec-N#sec-No-sec-numbering] ```[.lang-html] ####[#subsubsec-No-sec-numbering] 하하위섹션 [.no-sec-N#sec-No-sec-numbering] ```/ ## 문헌이나 다른 사이트들 참조하기 와 id 가 있는 HTML 원소들 참조하기. ```[.linenums.lang-html] <div class="p"> Ref. <cite class="ref-docuK"></cite>, Ref. <cite class="ref-docuKShort"></cite>. </div> <div class="p"> Eq. <refer class="eqq-1"></refer>, Eq. <refer class="eqq-2"></refer>. </div> <div class="p"> Fig. <refer class="fig-1"></refer> </div> <div class="p"> Code: <refer class="code-1"></refer> </div> <div class="p"> Sec. <refer class="sec-Test"></refer>, Sec. <refer class="sec-No-sec-numbering"></refer>, SubSec. <refer class="subsec-No-sec-numbering"></refer>, SubSubSec. <refer class="subsubsec-No-sec-numbering"></refer> </div> ```/

Ref. , Ref. .

Eq. , Eq. .

Fig.

Code:

Sec. , Sec. , SubSec. , SubSubSec.

이 docuK.SEE 문서에는 아래와 같은 HTML 원소들이 있답니다. ```[.linenums.lang-html] <!-- ## RRA with ol.refs --> <ol class="refs"> <div class="subsec"><h3>Main</h3></div> <li id="ref-docuK"><a href="https://kipid.tistory.com/entry/HTML-docuK-format-ver-20">kipid's blog - HTML docuK format ver. 2.1</a>;<br> // Updated regularly</li> <li id="ref-docuKShort"><a href="https://kipid.tistory.com/entry/docuK-short-copiable-version">kipid's blog - docuK short copiable version</a>;<br> // Updated regularly</li> </ol> <!-- ## eqq tag (LaTeX equations) --> <span class="emph"><eqq id="eqq-1"> \alpha \beta = \int f(\gamma) dx \sum_i \hat{H}_i </eqq></span> <eqq id="eqq-2"> \begin{split} \vec{x} &= x^{\bar{i}} \vec{e}_{\bar{i}} = x \vec{e}_x + y \vec{e}_y + z \vec{e}_z \\ &= x^{i} \vec{e}_{i} = r \vec{e}_r + \theta \vec{e}_{\theta} + \phi \vec{e}_{\phi} \\ &= x^{i'} \vec{e}_{i'} = u \vec{e}_u + v \vec{e}_v + w \vec{e}_w \\ \end{split} </eqq> <!-- ## figure tag (img or iframe such as youtube video) --> <figure id="fig-1"><div class="fig"> <img delayed-src="https://blog.kakaocdn.net/dn/bfXXOe/btr2D5LJWv8/8QVkGacKxfeA04512qPFk1/img.png" alt="img with delayed-src"> <div class="caption">Caption.</div> </div></figure> <!-- ## div tag with span.number HTML element. (span.number is cited as a text.) --> <div id="code-1"><span class="number">Java vertx server code example</span> ```[.scrollable.lang-java] import org.vertx.java.platform.Verticle; // Every Java verticle must extend the class org.vertx.java.platform.Verticle. You must override the start method - this is called by Vert.x when the verticle is started. import org.vertx.java.core.http.HttpServerRequest; public class HelloWorldServer extends Verticle { /////////////////////////////////////////////// // Called when the verticle is deployed. /////////////////////////////////////////////// @Override public void start() { ///////////////////////////////////////////// // Lambda exp with chaining. ///////////////////////////////////////////// vertx.createHttpServer().requestHandler( (HttpServerRequest req) -> { System.out.println("req.method(): "+req.method()); // GET, PUT, POST, DELETE, HEAD, OPTIONS, CONNECT, TRACE, PATCH req.response().putHeader("Content-Type","text/html"); req.response().end("<h1>Hello World</h1>"); req.response().close(); }).listen(1001); } /////////////////////////////////////////////// // Called when the verticle is undeployed. /////////////////////////////////////////////// @Override public void stop() { // do something. } } ```/ // Hack to avoid closing "```" code. </div> ```/ ## PH ###/ Posting History 포스팅 역사가 여기 기록됩니다. 이 섹션은 자동으로 숨겨져 있습니다.

• Posting History is put here.
• 2014-06-18: First posting.

##/ Posting History ## TOC 목차 (TOC) 섹션은 자동으로 닫히는 섹션입니다., 예를 들자면 다른 글자들은 이 안에 들어올 수 없습니다. 따라서 이 글자들은 목차 (TOC) 바깥에 위치하게 될겁니다. ##/ Table of Contents. Table will be automatically filled up. ## RRA ###/ References and Related Articles

Main

1. kipid's blog - HTML docuK format ver. 2.1;
   // Updated regularly
2. kipid's blog - docuK short copiable version;
   // Updated regularly
3. github.com - kipid - docuK

Supported by

4. jQuery.com; and jQuery - download;
   // JavaScript enhancer
5. MathJax.org; and MathJax Documentation - latest; and The Core Configuration Options; and The MathJax.Hub Object;
   // Math renderer.
6. Google Code Prettify and Getting Started;
   // Code prettyfier.

API documentation

7. jQuery - contents(): Get array of immediate children of element, including text nodes.
8. MDN - CSS full reference; and especially Pseudo-classes is useful. Ex: element:nth-of-type(an + b) { style properties } element:nth-child(an + b) { style properties }

Other markdown/markup languages

9. LaTeX(라텍스, 레이텍) 소개 및 설명서(Guide)들, 2014-03-24
   // 다른 이런류의 편집기가 많긴 하지만, 그 기원(?)이라고 할 수 있는게 TeX/LaTeX 일듯. 그런데 이건 책이나 논문을 만드는데 목적을 두고 만들어진 것이라서 pdf 같은걸로 결과물을 주기 때문에 인터넷, IT 기기에서 사용하기에는 부적합해 보이기도.
   // 그래도 문법은 차용해서 쓰기 좋음.
10. wikipedia.org;
    // Wikipedia uses its own markdown language.
11. stackoverflow.com;
    // Stack Overflow uses its own markdown language.
12. GitHub/adam-p - Markdown (GitHub); and live demo page
    // This might be used in GitHub wiki.

##/ References and Related Articles ## head (h2) of section section contents ### head (h3) of subsection contents of subsection #### head (h4) of subsubsection contents of subsubsection ####/ optional end of subsubsection ###/ optional end of subsection ##/ optional end of section ##[.hiden#sec-HidenSec] 초반엔 숨겨지는 섹션 [emmet style] class .hiden 로 해당 섹션을 초반에 숨겨놓을 수 있습니다. ## 직접적인 HTML tag | code 무언가 새로운 걸 배우고 외운다는게 쉽지 않고 시간이 걸린다는걸 알기에, 이 문서K 는 최대한 간단하게 만들었습니다. 그리고 이 문서K 가 해주는 일은 간단히 문자들로 형식화되어 쓰여긴 글을 HTML 로 적당히 바꿔주는 일일 뿐이기 때문에 새로운 문법은 최소화 시켰고 직접적인 HTML tag | code 를 활용하도록 만들었습니다.

Raw HTML can be added like this. A paragraph starting with '<' will be appended without any change.

Raw text is appended as a paragraph, enclosed by <div class="p"></div>.

This is default comment box: <div class="cmt"></div>. You can put multiple paragraphs and nested htmls.

• Unordered list 1.
• Unordered list 2.

1. Ordered list 1.
2. Ordered list 2.

This is it.

This is default 'be careful' box: <div class="bcf"></div>.

## Links | URLs to appropriate html Planning to implement this. http://www.npr.org/blogs/health/2013/12/30/258376009/how-language-seems-to-shape-ones-view-of-the-world How Language Seems To Shape One's View Of The World , January 02, 2014, by ALAN YU. ## Figures

Caption.

## Maths or Equations Maths or Equations can be put by using \$TeX math\$, <eq>TeX math</eq>, and <eqq>TeX math</eqq>. The first two are converted to inline maths like $\alpha \beta = \int f(\gamma) dx \sum_i \hat{H}_i$. The last one is converted to outline math like \alpha \beta = \int f(\gamma) dx \sum_i \hat{H}_i \begin{split} \vec{x} &= x^{\bar{i}} \vec{e}_{\bar{i}} = x \vec{e}_x + y \vec{e}_y + z \vec{e}_z \\ &= x^{i} \vec{e}_{i} = r \vec{e}_r + \theta \vec{e}_{\theta} + \phi \vec{e}_{\phi} \\ &= x^{i'} \vec{e}_{i'} = u \vec{e}_u + v \vec{e}_v + w \vec{e}_w \\ \end{split} ## Codes Codes can be pretty-printed. Using <pre class="prettyprint scrollable lang-java">Codes to be pretty-printed.</pre>,

import org.vertx.java.platform.Verticle; // Every Java verticle must extend the class org.vertx.java.platform.Verticle. You must override the start method - this is called by Vert.x when the verticle is started.

import org.vertx.java.core.http.HttpServerRequest;


public class HelloWorldServer extends Verticle {
	///////////////////////////////////////////////
	// Called when the verticle is deployed.
	///////////////////////////////////////////////
	@Override
	public void start() {
		/////////////////////////////////////////////
		// Lambda exp with chaining.
		/////////////////////////////////////////////
		vertx.createHttpServer().requestHandler( (HttpServerRequest req) -> {
			System.out.println("req.method(): "+req.method()); // GET, PUT, POST, DELETE, HEAD, OPTIONS, CONNECT, TRACE, PATCH

			req.response().putHeader("Content-Type","text/html");
			req.response().end("<h1>Hello World</h1>");
			req.response().close();
		}).listen(1001);
	}

	///////////////////////////////////////////////
	// Called when the verticle is undeployed.
	///////////////////////////////////////////////
	@Override
	public void stop() {
		// do something.
	}
}

Using ```Codes to be pretty-printed.```/, or ```[Emmet style class and id attr like ".class-0.class-1#element-id"]Codes to be pretty-printed.```/,

Java vertx server code example ```[.scrollable.lang-java] import org.vertx.java.platform.Verticle; // Every Java verticle must extend the class org.vertx.java.platform.Verticle. You must override the start method - this is called by Vert.x when the verticle is started. import org.vertx.java.core.http.HttpServerRequest; public class HelloWorldServer extends Verticle { /////////////////////////////////////////////// // Called when the verticle is deployed. /////////////////////////////////////////////// @Override public void start() { ///////////////////////////////////////////// // Lambda exp with chaining. ///////////////////////////////////////////// vertx.createHttpServer().requestHandler( (HttpServerRequest req) -> { System.out.println("req.method(): "+req.method()); // GET, PUT, POST, DELETE, HEAD, OPTIONS, CONNECT, TRACE, PATCH req.response().putHeader("Content-Type","text/html"); req.response().end("<h1>Hello World</h1>"); req.response().close(); }).listen(1001); } /////////////////////////////////////////////// // Called when the verticle is undeployed. /////////////////////////////////////////////// @Override public void stop() { // do something. } } ```/

## New Section "```/" 로 끝나면 에러남 ㅡ,.ㅡ;;; 귀찮네 해결하기.

# Update History and pure SEE.html file

Update History

• 2014-09-17: script tag 도 double enter 해결.
• 2014-08-12: SEE 처리하는 JavaScript docuK-prepare.js 및 docuK-postProcess.js로. 그리고 SEE 형태로만 posting 해도 잘 되도록 "codeprint.SEE" (<codeprint class="SEE"></codeprint>) 안에 넣으면 처리되도록 함.
• 2014-08-12: code 넣는거 ``` 로 가능하게. 그리고 pre code print 할때 중간에 double enter가 들어가면 SEE에서 이상하게 처리했던거 해결.
• 2014-08-12: section hiden option 같은 것들 가능하게. [Emmet] 형태로 class, id 부여 가능.
• 2014-08-09: $("#text-edit-id").attr({contenteditable:false}); 같은걸로 rendering 되는 동안 편집 막기. Shift+Enter로 render trigger. Render가 되었는지 안되었는지 알려주려고 시간을 표시. (실패할 경우도 있을라나?)

Planning to do

• ## COTD: Categories of this Document 구현하기.
• Links | URLs to appropriate html. 그냥 HTML tag <a href=""></a> 쓰게 해도 될듯 하지만, 링크 다는건 자주 써먹을듯 하니... HTML tag로는 당연히 가능하게 하면서.
• 처음에 <tag>가 오는데 paragraph로 처리하고 싶을때는 <div class="p"></div>를 낑겨 넣어야 하는듯. (double enter로 split 명령을 내리기 때문에 enter 다음에 space를 넣으면 당장은 해결 되는데... 바꿔줘야 할듯.)

Copy and Paste this code. (pure SEE.html)

Copy the below Full SEE Code