# 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 이 문서의 카테고리가 여기에 쓰여집니다. 이 섹션도 초기엔 자동으로 숨겨져 있습니다.

##/ 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]  <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>  <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 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 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

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

Supported by

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

API documentation

jQuery - contents(): Get array of immediate children of element, including text nodes.
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

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

Ordered list 1.
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

## 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

저작자표시 비영리 변경금지

'[IT/Programming] > HTML related' 카테고리의 다른 글

React 사용 설정하기 (webpack) with TypeScript (0)	2024.04.23
HTML CSS composes, and pseudo-element :after, :active:after, and transition (0)	2024.04.23
순수한 완전 쉬운 편집 (SEE: Super Easy Edit) 문서K (Markdown: 마크다운): 사용 설명서. (0)	2024.04.23
pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual \| Documentation \| Tutorial). (1)	2024.04.23
Super Easy Edit (SEE) of docuK: 사용 설명서 (Manual \| Documentation \| Tutorial). (2)	2024.04.23
VtoV Back-end 개발자용 과제 테스트 (1)	2024.04.23
HTML a href tag with onclick return (2)	2024.04.07

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