m.logPrint() is working!

<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].

docuK-1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.

Table of Contents is filled out.

Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.

<cite> and <refer> tags are rendered to show bubble reference.

<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.

Current styles (dark/bright mode, font-family, font-size, line-height) are shown.

disqus.js with id="disqus-js" is loaded.

kakao.js with id="kakao-jssdk" is loaded.

New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.

m.delayPad=0;
m.wait=512;
wait 748ms.

▼ Hide

Toggle a mess

Go (FS)

TofC

DocuK Log

Backward

Forward

RRA

Lists

CmtZ

CmtX

Handle CmtZ

▲

Go: Fuzzy search

* 현재 문자들로부터 만들어진 HTML 문서K 가 보여지고 있는 중입니다.

문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명

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

문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명

* 선택 가능한 모드 (밝은 화면, 어두운 화면, 추가로 핑크도 구현할 예정), 글씨체 선택 가능.

문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명

* 글씨 크기 바꾸기 가능, 줄 간격 바꾸기 가능.

문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명

* 자동으로 만들어 주는 목차 (각 섹션, 하위 섹션으로 점프도 가능하고 각 섹션의 왼쪽 T 버튼을 누르면 목차로 이동됩니다.).

문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명

* 섹션들과 그림들 수식들 자동으로 숫자 이름 메겨주기.

문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명

* 참고 문헌 참조 (citing) 쉽게 하기, 팝업 형태로 참조한 문헌들 바로 보여주기.

문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명

* 그림이나 수식도 쉽게 참조 (refering) 하기. 팝업 형태로 참조한 그림 수식 바로 보여주기.

문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명

* ID 가 붙은 어떠한 원소들 (HTML elements with id) 도 참조 (refering with class="id") 가능.

문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명

* 데이터를 아끼고 전자기기의 과부하를 방지하기 위한, 지연 된 그림과 영상들 로딩.

문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명

* 자동적인 코드 출력 : `<codeprintsquasi-id="code-id"></codeprint>` to `<presquasi-id="pre-code-id"></pre>`. (기본적으로 docuK 는 여러 docuK 문서가 한 파일에 있을때 중복 된 아이디를 다르게 다루도록 id 뒤에 "-in-docuK-1" 같은걸 추가하는데 이 옵션을 끄려면, 빈 <script></script> SEE 코드 초반에 넣어주세요.)

문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명

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

Posting History

* 포스팅 역사기록을 위한 섹션. 이 섹션은 페이지를 처음 열땐 숨겨져 있습니다.

Posting History

* 2023-09-25 : 업데이트.

Posting History

* 2023-05-18 : 업데이트.

Posting History

* 2014-06-18 : 첫번째 포스팅.

Categories of this document

* 이 문서의 카테고리가 여기에 쓰여집니다. 이 섹션도 초기엔 자동으로 숨겨져 있습니다.

Categories of this document

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

Categories of this document

* Recent interests

경고

* 이 데모 | 예제 에서는 문서K 및 SEE (완전 쉬운 편집) 의 몇가지 기능들이 제한될 수 있습니다. 지연된 로딩, 브라우저 정보, 코드 예쁘게 출력하기, 수식 출력하기, 추가로 초반에 한번만 실행되는 자바스크립트 코드 같은 것들은 제대로 동작하지 않을수도 있습니다.

경고

* 여기서는 오직 m.docuKProcess() 함수만이 호출될 것이고, HTML 문서K 를 따로 작성하시거나 script 가 허용되는 블로그나 홈페이지 사이트에 이 문서K 및 SEE (완전 쉬운 편집) 문서를 올리실 경우에는 전체 기능들을 모두 제대로 사용하실 수 있을겁니다.

명령문 (Statement)

* 각각의 명령문 (Statement) 이나 문단은 두개의 엔터 이상으로 띄어져 있어야 합니다.

명령문 (Statement)

* 명령문의 처음에 '#' 이나 '<' 가 올 경우 특별하게 처리 됩니다.

문서K 와 섹션들

* '#' 는 문서K 전체 제목을 의미합니다. 그리고 '##' | '###' | '####' 은 섹션 | 하위섹션 | 하하위섹션을 의미합니다.

문서K 와 섹션들

클래스 (class) 와 아이디 (id) 를 가지는 섹션

* 섹션은 class 와 id 를 가질 수 있습니다. 아이디를 설정하면 이 아이디를 이용해 다음과 같이 <refer class="sec-Test"></refer>: Sec. 섹션을 참조할 수도 있습니다.

클래스 (class) 와 아이디 (id) 를 가지는 섹션

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

클래스 (class) 와 아이디 (id) 를 가지는 섹션

* ##[.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.

미리 정의된 섹션들: "PH", "COTD", "RRA", "TOC"

* 아래에서 미리 정의된 섹션들이 구현 된 것을 살펴보세요. 어떤식으로 동작 되는지 쉽게 파악하실 수 있을 겁니다.

섹션 숫자로 표현 안하기 (class="no-sec-N")

* 섹션이 숫자로 표현되길 원하지 않으시면 다음과 같이 class 와 id 를 정하세요.

섹션 숫자로 표현 안하기 (class="no-sec-N")

* ##[.no-sec-N#sec-No-sec-numbering] No section numbering (class="no-sec-N")

섹션 숫자로 표현 안하기 (class="no-sec-N")
-- 하위섹션 [.no-sec-N#sec-No-sec-numbering]

* ###[#subsec-No-sec-numbering] 하위섹션 [.no-sec-N#sec-No-sec-numbering]

섹션 숫자로 표현 안하기 (class="no-sec-N")
-- 하위섹션 [.no-sec-N#sec-No-sec-numbering]
-- 하하위섹션 [.no-sec-N#sec-No-sec-numbering]

* ####[#subsubsec-No-sec-numbering] 하하위섹션 [.no-sec-N#sec-No-sec-numbering]

문헌이나 다른 사이트들 참조하기 와 id 가 있는 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>

문헌이나 다른 사이트들 참조하기 와 id 가 있는 HTML 원소들 참조하기.

* Ref. , Ref. .

문헌이나 다른 사이트들 참조하기 와 id 가 있는 HTML 원소들 참조하기.

* Eq. , Eq. .

문헌이나 다른 사이트들 참조하기 와 id 가 있는 HTML 원소들 참조하기.

* Fig.

문헌이나 다른 사이트들 참조하기 와 id 가 있는 HTML 원소들 참조하기.

* Code:

문헌이나 다른 사이트들 참조하기 와 id 가 있는 HTML 원소들 참조하기.

* 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. } }

문헌이나 다른 사이트들 참조하기 와 id 가 있는 HTML 원소들 참조하기.

* Sec. , Sec. , SubSec. , SubSubSec.

문헌이나 다른 사이트들 참조하기 와 id 가 있는 HTML 원소들 참조하기.

* 이 docuK.SEE 문서에는 아래와 같은 HTML 원소들이 있답니다.

문헌이나 다른 사이트들 참조하기 와 id 가 있는 HTML 원소들 참조하기.

*  <ol class="refs"> <div class="subsec"><h3>Main</h3></div> <lisquasi-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> <lisquasi-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"><eqqsquasi-id="eqq-1"> \alpha \beta = \int f(\gamma) dx \sum_i \hat{H}_i </eqq></span> <eqqsquasi-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>  <figuresquasi-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>  <divsquasi-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>

Posting History

* 포스팅 역사가 여기 기록됩니다. 이 섹션은 자동으로 숨겨져 있습니다.

Posting History

* Posting History is put here.

Posting History

* 2014-06-18: First posting.

* 목차 (TOC) 섹션은 자동으로 닫히는 섹션입니다., 예를 들자면 다른 글자들은 이 안에 들어올 수 없습니다. 따라서 이 글자들은 목차 (TOC) 바깥에 위치하게 될겁니다.