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=1024;
wait 728ms.

▼ Hide

Toggle a mess

Go (FS)

TofC

DocuK Log

Backward

Forward

RRA

Lists

CmtZ

CmtX

Handle CmtZ

▲

out focus

Mode: Bright; Font: Noto Sans KR; font-size: 18.0px (10.0); line-height: 1.6;
width: 1280, height: 720, version: 2.12.18
Canonical URI: https://kipid.tistory.com/entry/pure-SEE
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/244
document.referrer: Empty

This document is rendered by docuK (See also SEE (Super Easy Edit) of docuK and pure SEE).

pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial).

The docuK rendered from the current text is being represented.

I recommend you to Download pure-SEE-copiable.html, and copy and paste to new html file, and edit it with referencing and learning the SEE document.

pure SEE copiable.html

0.04MB

T 1.Abstract | Description of docuK and SEE

▼ Show/Hide

Specific features are

Changable mode, font-family.
Resizable font-size, line-height.
Table of contents.
Numbering of sections/figures/equations.
Citing references in bubble-shape pop up.
Refering figures and equations.
Refering anything with id and element with class="number".
Delayed(lazy)-loading of figures (images, iframes).
Delayed(lazy)-rendering of maths (MathJax). From 2023-06-01, MathJax is updated to render all equations in docuK or SEE (Super Easy Edit) in the beginning.
Auto code printing from `<codeprint id="code-id"></codeprint>` to `<pre id="pre-code-id"></pre>`. (For non-duplicate id handling, put empty <script></script> in the beginning right after h1 '#'.)

Quite similar to LaTeX or Wiki document, but extended a little bit.

▲ Hide

T 2.SEE (Super Easy Edit) code only

▼ Show/Hide

On the left side of codes is there a hiden button to toggle/switch scrollability ({max-height:some} or {max-height:none}).

# pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial).

The docuK rendered from the current text is being represented.

<script>
// Hack to avoid duplicate id handling of docuK process.
</script>

I recommend you to <a download="" target="_blank" href="https://tistory1.daumcdn.net/tistory/1468360/skin/images/pure%20SEE%20copiable.html">Download pure-SEE-copiable.html</a>, and copy and paste to new html file, and edit it with referencing and learning the SEE document.

<div style="padding:1em; margin:1em auto; background-color:white; color:black"><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/FPdXo/btsJj3GsOsA/ER9ql9RTCPXdFukowQ9ERk/pure%20SEE%20copiable.html?attach=1&amp;knm=tfile.html" class="">
    <div class="image"></div>
    <div class="desc"><div class="filename"><span class="name">pure SEE copiable.html</span></div>
<div class="size">0.04MB</div>
</div>
  </a></figure>
</div>




## Abstract | Description of docuK and SEE

Specific features are

<ul>
<li>Changable mode, font-family.</li>
<li>Resizable font-size, line-height.</li>
<li>Table of contents.</li>
<li>Numbering of sections/figures/equations.</li>
<li>Citing references in bubble-shape pop up.</li>
<li>Refering figures and equations.</li>
<li>Refering anything with id and element with class="number".</li>
<li>Delayed(lazy)-loading of figures (images, iframes).</li>
<li>Delayed(lazy)-rendering of maths (MathJax). From 2023-06-01, MathJax is updated to render all equations in docuK or SEE (Super Easy Edit) in the beginning.</li>
<li>Auto code printing from `<code class="prettyprint">&lt;codeprint id="code-id"&gt;&lt;/codeprint&gt;</code>` to `<code class="prettyprint">&lt;pre id="pre-code-id"&gt;&lt;/pre&gt;</code>`. (For non-duplicate id handling, put empty <code class="prettyprint">&lt;script&gt;&lt;/script&gt;</code> in the beginning right after h1 '#'.)</li>
</ul>

Quite similar to LaTeX or Wiki document, but extended a little bit.



## SEE (Super Easy Edit) code only

<pre class="printSEE prettyprint scrollable lang-html" id="pre0-SEE"></pre>



## Full SEE code of docuK (Including javascript and CSS links. Stand alone document|html file.)

<textarea id="textarea-full-SEE" style="width:100%; font-size:.8em; font-family:monospace" rows="25"></textarea>



## PH

###/ Posting History

Posting History is put here. This section is automatically hiden.

<ul>
<li>2023-09-26 : Update.</li>
<li>2023-05-18 : Update.</li>
<li>2014-06-18 : First posting.</li>
</ul>

##/ Posting History



## COTD

###/ Categories of this document

Categories of this document is put here with links to <a target="_blank" href="https://kipid.tistory.com/entry/Lists">Lists of kipid's blog</a>. This section is automatically hiden.

<ul>
<li><a target="_blank" href="https://kipid.tistory.com/entry/Lists#subsec-MarkDown-docuK">[IT/Programming] Category -- MarkDown: docuK SEE (Super Easy Edit)</a></li>
<li><a target="_blank" href="https://kipid.tistory.com/entry/Lists#sec-interest">Recent interests</a></li>
</ul>

##/ Categories of this document



## Warning

In this live demo, there is some limitations. Delayed loading, browser-info, code prettyprint, maths, and possibly some additional javascript codes which are called only once in the beginning (<code>docuK-prepare.js</code>), or which are using <code>k.variables</code> already asigned before, will not work in the afterward rendering.

Only <code>k.docuKProcess()</code> will be called in this demo example. But when you put "docuK HTML part" into a html file or post it to blogs (which allows script), the full feature of docuK will be loaded and every functionality of docuK will work.



## TOC

##/ Table of Contents.
Table will be automatically filled up. Details will be explained in the following sections.



## Statement

Each statement or paragraph is splitted by double (or more than double) enters, e.g. /\n\n+/.

If '#' and '&lt;' comes first in a statement, the paragraph will be specially treated.



## DocuK and sections

'#' indicates docuK, and '##' | '###' | '####' to sec | subsec | subsubsec.

End of docuK: '#/', and end of section | subsec | subsubsec: '##/' | '###/' | '####/' are <span class="emph">optional</span>. Renderer detects end of something automatically according the hierarchy.

End of something can be used as comments.
Text after '#/' is ignored. Therefore use '#####/' for super concrete comment.
Or just <span class="emph">end of something which are not yet opened</span> is OK.

The following is ignored, as you see it in the rendered docuK.

###/ End of something can be used as comments.
Text after '#/' is ignored. Therefore use '#####/' for super concrete comment.
Or just <span class="emph">end of something which are not yet opened</span> is OK.



##[.class0#sec-Test] Section with class and id

Section can have class and id attributes. Using the id, you can refer it like <code class="prettyprint">&lt;refer class="sec-Test"&gt;&lt;/refer&gt;</code> <refer class="sec-Test"></refer>.

<div class="p">Class and Id are asigned with [emmet style] like <code>##[.class0.class1.hiden#sec-Test] Section head</code>.</div>

```[.lang-html]
##[.class0#sec-Test] Section with class and id
```/



## Predifined section: "PH", "TOC", "RRA", "COTD"

There are three predefined sections. "PH": Posting History, "TOC": Table of Contents, "RRA": References and Related Articles, "COTD": Categories of this document. Possibly I will add more predefined sections which can be used frequently.

See the predefined sections implemented below, and you can easily figure it out how to use it.



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

To avoid section numbering, do it like this.

```[.lang-html]
##[.no-sec-N#sec-No-sec-numbering] No section numbering (class="no-sec-N")
```/



###[#subsec-No-sec-numbering] SubSection of [.no-sec-N#sec-No-sec-numbering]

```[.lang-html]
###[#subsec-No-sec-numbering] SubSection of [.no-sec-N#sec-No-sec-numbering]
```/



####[#subsubsec-No-sec-numbering] SubSubSection of [.no-sec-N#sec-No-sec-numbering]

```[.lang-html]
####[#subsubsec-No-sec-numbering] SubSubSection of [.no-sec-N#sec-No-sec-numbering]
```/



## Citing RRA and Refering HTML elements with id.

```[.linenums.lang-html]
&lt;div class="p"&gt;
Ref. &lt;cite class="ref-docuK"&gt;&lt;/cite&gt;, Ref. &lt;cite class="ref-docuKShort"&gt;&lt;/cite&gt;.
&lt;/div&gt;

&lt;div class="p"&gt;
Eq. &lt;refer class="eqq-1"&gt;&lt;/refer&gt;, Eq. &lt;refer class="eqq-2"&gt;&lt;/refer&gt;.
&lt;/div&gt;

&lt;div class="p"&gt;
Fig. &lt;refer class="fig-1"&gt;&lt;/refer&gt;
&lt;/div&gt;

&lt;div class="p"&gt;
Code: &lt;refer class="code-1"&gt;&lt;/refer&gt;
&lt;/div&gt;

&lt;div class="p"&gt;
Sec. &lt;refer class="sec-Test"&gt;&lt;/refer&gt;, Sec. &lt;refer class="sec-No-sec-numbering"&gt;&lt;/refer&gt;, SubSec. &lt;refer class="subsec-No-sec-numbering"&gt;&lt;/refer&gt;, SubSubSec. &lt;refer class="subsubsec-No-sec-numbering"&gt;&lt;/refer&gt;
&lt;/div&gt;
```/

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

There are the blow HTML elments in this <code>docuK.SEE</code>.

```[.linenums.lang-html]
&lt;!-- ## RRA with ol.refs --&gt;
&lt;ol class="refs"&gt;
&lt;div class="subsec"&gt;&lt;h3&gt;Main&lt;/h3&gt;&lt;/div&gt;
	&lt;li id="ref-docuK"&gt;&lt;a href="https://kipid.tistory.com/entry/HTML-docuK-format-ver-20"&gt;kipid's blog - HTML docuK format ver. 2.1&lt;/a&gt;;&lt;br&gt;
		// Updated regularly&lt;/li&gt;
&lt;/ol&gt;

&lt;!-- ## eqq tag (LaTeX equations) --&gt;
&lt;span class="emph"&gt;&lt;eqq id="eqq-1"&gt;
	\alpha \beta = \int f(\gamma) dx \sum_i \hat{H}_i
&lt;/eqq&gt;&lt;/span&gt;

&lt;eqq id="eqq-2"&gt;
\begin{split}
	\vec{x} &amp;= x^{\bar{i}} \vec{e}_{\bar{i}} = x \vec{e}_x + y \vec{e}_y + z \vec{e}_z \\
		&amp;= x^{i} \vec{e}_{i} = r \vec{e}_r + \theta \vec{e}_{\theta} + \phi \vec{e}_{\phi} \\
		&amp;= x^{i'} \vec{e}_{i'} = u \vec{e}_u + v \vec{e}_v + w \vec{e}_w \\
\end{split}
&lt;/eqq&gt;

&lt;!-- ## figure tag (img or iframe such as youtube video) --&gt;
&lt;figure id="fig-1"&gt;&lt;div class="fig"&gt;
	&lt;img delayed-src="https://blog.kakaocdn.net/dn/bfXXOe/btr2D5LJWv8/8QVkGacKxfeA04512qPFk1/img.png" alt="img with delayed-src"&gt;
	&lt;div class="caption"&gt;Caption.&lt;/div&gt;
&lt;/div&gt;&lt;/figure&gt;

&lt;!-- ## div tag with span.number HTML element. (span.number is cited as a text.) --&gt;
&lt;div id="code-1"&gt;&lt;span class="number"&gt;Java vertx server code example&lt;/span&gt;

```[.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) -&gt; {
			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("&lt;h1&gt;Hello World&lt;/h1&gt;");
			req.response().close();
		}).listen(1001);
	}

	///////////////////////////////////////////////
	// Called when the verticle is undeployed.
	///////////////////////////////////////////////
	@Override
	public void stop(){
		// do something.
	}
}
```\/ // Hack to avoid closing "```" code.

&lt;/div&gt;
```/



## PH

###/ Posting History

Posting History is put here. This section is automatically hiden.

<ul>
	<li>Posting History is put here.</li>
	<li>2014-06-18: First posting.</li>
</ul>

##/ Posting History



## TOC

TOC is a self-closing section, i.e. no other texts can be put inside.
Next text will be out of TOC.

##/ Table of Contents.
Table will be automatically filled up.



## RRA

###/ References and Related Articles

<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-docuKGithub"><a href="https://github.com/kipid/docuK">github.com - kipid - docuK</a></li>
<div class="subsec"><h3>Supported by</h3></div>
	<li id="ref-jQuery"><a href="http://jquery.com/">jQuery.com</a>; and <a href="http://jquery.com/download/">jQuery - download</a>;<br>
		// JavaScript enhancer</li>
	<li id="ref-mathjax"><a href="http://www.mathjax.org/">MathJax.org</a>; and <a href="http://docs.mathjax.org/en/latest/index.html">MathJax Documentation - latest</a>; and <a href="http://docs.mathjax.org/en/latest/options/hub.html">The Core Configuration Options</a>; and <a href="http://docs.mathjax.org/en/latest/api/hub.html">The MathJax.Hub Object</a>;<br>
		// Math renderer.</li>
	<li id="ref-googleCodePrettyfy"><a href="https://code.google.com/p/google-code-prettify/">Google Code Prettify</a> and <a href="https://code.google.com/p/google-code-prettify/wiki/GettingStarted">Getting Started</a>;<br>
		// Code prettyfier.</li>
<div class="subsec"><h3>API documentation</h3></div>
	<li id="ref-jQuery-contents"><a href="http://api.jquery.com/contents/">jQuery - contents()</a>: Get array of immediate children of element, including text nodes.</li>
	<li id="ref-MDN-css-reference"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">MDN - CSS full reference</a>; and especially <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> is useful. Ex: <code class="prettyprint">element:nth-of-type(an + b) { style properties }</code> <code class="prettyprint">element:nth-child(an + b) { style properties }</code></li>
<div class="subsec"><h3>Other markdown/markup languages</h3></div>
	<li id="ref-latex"><a href="https://kipid.tistory.com/entry/introducing-LaTeX-and-Guides">LaTeX(라텍스, 레이텍) 소개 및 설명서(Guide)들</a>, 2014-03-24<br>
		// 다른 이런류의 편집기가 많긴 하지만, 그 기원(?)이라고 할 수 있는게 TeX/LaTeX 일듯. 그런데 이건 책이나 논문을 만드는데 목적을 두고 만들어진 것이라서 pdf 같은걸로 결과물을 주기 때문에 인터넷, IT 기기에서 사용하기에는 부적합해 보이기도.<br>
		// 그래도 문법은 차용해서 쓰기 좋음.</li>
	<li><a href="http://www.wikipedia.org/">wikipedia.org</a>;<br>
		// Wikipedia uses its own markdown language.</li>
	<li><a href="https://stackoverflow.com/">stackoverflow.com</a>;<br>
		// Stack Overflow uses its own markdown language.</li>
	<li><a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">GitHub/adam-p - Markdown (GitHub)</a>; and <a href="http://markdown-here.com/livedemo.html">live demo page</a><br>
		// This might be used in GitHub wiki.</li>
</ol>

##/ 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] Initially Hiden Section

With hiden class, the section will be hiden initially.



## Raw HTML

Since learning and remembering something new takes time, this is designed to be just as simple as possible. And as what this actually do is simply renderring/making a text to the HTML format, new grammers will be minimized by adopting raw HTML grammers.

<div class="p">
Raw HTML can be added like this. A paragraph starting with '&lt;' will be appended without any change.
</div>

Raw text is appended as a paragraph, enclosed by <code class="prettyprint">&lt;div class="p"&gt;&lt;/div&gt;</code>.

<div class="cmt">

This is default comment box: <code class="prettyprint">&lt;div class="cmt"&gt;&lt;/div&gt;</code>.

You can put multiple paragraphs and nested htmls.

<ul>
	<li>Unordered list 1.</li>
	<li>Unordered list 2.</li>
</ul>
<ol>
	<li>Ordered list 1.</li>
	<li>Ordered list 2.</li>
</ol>

This is it.

</div>

<div class="bcf">

This is default 'be careful' box: <code class="prettyprint">&lt;div class="bcf"&gt;&lt;/div&gt;</code>.

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

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



## Maths or Equations

Maths or Equations can be put by using \$TeX math\$, <code class="prettyprint">&lt;eq&gt;TeX math&lt;/eq&gt;</code>, and <code class="prettyprint">&lt;eqq&gt;TeX math&lt;/eqq&gt;</code>.

The first two are converted to <span class="emph">inline maths like $\alpha \beta = \int f(\gamma) dx \sum_i \hat{H}_i$. The last one</span> is converted to outline math like

<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} &amp;= x^{\bar{i}} \vec{e}_{\bar{i}} = x \vec{e}_x + y \vec{e}_y + z \vec{e}_z \\
		&amp;= x^{i} \vec{e}_{i} = r \vec{e}_r + \theta \vec{e}_{\theta} + \phi \vec{e}_{\phi} \\
		&amp;= x^{i'} \vec{e}_{i'} = u \vec{e}_u + v \vec{e}_v + w \vec{e}_w \\
\end{split}
</eqq>



## Codes

Codes can be pretty-printed.

Using <code class="prettyprint">&lt;pre class="prettyprint scrollable lang-java"&gt;Codes to be pretty-printed.&lt;/pre&gt;</code>,

<pre class="prettyprint 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) -&gt; {
			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("&lt;h1&gt;Hello World&lt;/h1&gt;");
			req.response().close();
		}).listen(1001);
	}

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

<div class="p"></div>

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

<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) -&gt; {
			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("&lt;h1&gt;Hello World&lt;/h1&gt;");
			req.response().close();
		}).listen(1001);
	}

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

</div>



## Fuzzy Search of Contents of the SEE document

You can easily fuzzy-search contents of the SEE document with FS (<span class="bold">G</span>o: shortkey <span class="bold">G</span>).



## Header, Footer (Promoting recoeve.net)

In header and footer, there are promotions of <a target="_blank" href="https://recoeve.net/">recoeve.net</a>.

You can set the recoeve page of yours with <code>k.recoeveUserId="your-recoeve-id";</code>, and <code>k.recoCats="Current pages categories, ; separated multiple categories"</code>.

You can disable these promotions with <code>k.printMode=true</code> setting.

In this page, I set the recoeve-related variables like the below.

```
k.printMode=false;
k.recoeveUserId="kipid";
k.recoCats="[IT/Programming]--MarkDown--docuK SEE (Super Easy Edit)";
```/

So the iframe pages in the header and footer will be <a target="_blank" href="https://recoeve.net/user/kipid/mode/multireco?cat=%5BIT%2FProgramming%5D--MarkDown--docuK%20SEE%20(Super%20Easy%20Edit)&amp;ToR=#numbers-of-recos">[IT/Programming]--MarkDown--docuK SEE (Super Easy Edit) of kipid's Recoeve.net (multireco mode)</a>.

The default value of <code>k.recoeveUserId="kipid"</code> and <code>k.recoCats="[Music/Break]--K-Pop"</code>, when those are not set or empty.

▲ Hide

T 3.Full SEE code of docuK (Including javascript and CSS links. Stand alone document|html file.)

▼ Show/Hide

<!DOCTYPE html>

<script src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/jquery.js"></script>
<link rel="stylesheet" href="https://tistory1.daumcdn.net/tistory/1468360/skin/images/docuK-2.3.css">
<script src="https://tistory3.daumcdn.net/tistory/1468360/skin/images/docuK-prepare-2.3.js" charset="utf-8"></script>
</codeprint>

<codeprint class="SEE">
# pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial).

The docuK rendered from the current text is being represented.

I recommend you to <a download="" target="_blank" href="https://tistory1.daumcdn.net/tistory/1468360/skin/images/pure%20SEE%20copiable.html">Download pure-SEE-copiable.html</a>, and copy and paste to new html file, and edit it with referencing and learning the SEE document.

<div style="padding:1em; margin:1em auto; background-color:white; color:black"><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/FPdXo/btsJj3GsOsA/ER9ql9RTCPXdFukowQ9ERk/pure%20SEE%20copiable.html?attach=1&amp;knm=tfile.html" class="">
    <div class="image"></div>
    <div class="desc"><div class="filename"><span class="name">pure SEE copiable.html</span></div>
<div class="size">0.04MB</div>
</div>
  </a></figure>
</div>

## Abstract | Description of docuK and SEE

Specific features are

<ul>
<li>Changable mode, font-family.</li>
<li>Resizable font-size, line-height.</li>
<li>Table of contents.</li>
<li>Numbering of sections/figures/equations.</li>
<li>Citing references in bubble-shape pop up.</li>
<li>Refering figures and equations.</li>
<li>Refering anything with id and element with class="number".</li>
<li>Delayed(lazy)-loading of figures (images, iframes).</li>
<li>Delayed(lazy)-rendering of maths (MathJax). From 2023-06-01, MathJax is updated to render all equations in docuK or SEE (Super Easy Edit) in the beginning.</li>
<li>Auto code printing from `<code class="prettyprint">&lt;codeprint id="code-id"&gt;&lt;/codeprint&gt;</code>` to `<code class="prettyprint">&lt;pre id="pre-code-id"&gt;&lt;/pre&gt;</code>`. (For non-duplicate id handling, put empty <code class="prettyprint">&lt;script&gt;&lt;/script&gt;</code> in the beginning right after h1 '#'.)</li>
</ul>

Quite similar to LaTeX or Wiki document, but extended a little bit.

## SEE (Super Easy Edit) code only

## Full SEE code of docuK (Including javascript and CSS links. Stand alone document|html file.)

## PH

###/ Posting History

Posting History is put here. This section is automatically hiden.

<ul>
<li>2023-09-26 : Update.</li>
<li>2023-05-18 : Update.</li>
<li>2014-06-18 : First posting.</li>
</ul>

##/ Posting History

## COTD

###/ Categories of this document

Categories of this document is put here with links to <a target="_blank" href="https://kipid.tistory.com/entry/Lists">Lists of kipid's blog</a>. This section is automatically hiden.

<ul>
<li><a target="_blank" href="https://kipid.tistory.com/entry/Lists#subsec-MarkDown-docuK">[IT/Programming] Category -- MarkDown: docuK SEE (Super Easy Edit)</a></li>
<li><a target="_blank" href="https://kipid.tistory.com/entry/Lists#sec-interest">Recent interests</a></li>
</ul>

##/ Categories of this document

## Warning

In this live demo, there is some limitations. Delayed loading, browser-info, code prettyprint, maths, and possibly some additional javascript codes which are called only once in the beginning (<code>docuK-prepare.js</code>), or which are using <code>k.variables</code> already asigned before, will not work in the afterward rendering.

Only <code>k.docuKProcess()</code> will be called in this demo example. But when you put "docuK HTML part" into a html file or post it to blogs (which allows script), the full feature of docuK will be loaded and every functionality of docuK will work.

## TOC

##/ Table of Contents.
Table will be automatically filled up. Details will be explained in the following sections.

## Statement

Each statement or paragraph is splitted by double (or more than double) enters, e.g. /\n\n+/.

If '#' and '&lt;' comes first in a statement, the paragraph will be specially treated.

## DocuK and sections

'#' indicates docuK, and '##' | '###' | '####' to sec | subsec | subsubsec.

End of docuK: '#/', and end of section | subsec | subsubsec: '##/' | '###/' | '####/' are <span class="emph">optional</span>. Renderer detects end of something automatically according the hierarchy.

End of something can be used as comments.
Text after '#/' is ignored. Therefore use '#####/' for super concrete comment.
Or just <span class="emph">end of something which are not yet opened</span> is OK.

The following is ignored, as you see it in the rendered docuK.

###/ End of something can be used as comments.
Text after '#/' is ignored. Therefore use '#####/' for super concrete comment.
Or just <span class="emph">end of something which are not yet opened</span> is OK.

##[.class0#sec-Test] Section with class and id

Section can have class and id attributes. Using the id, you can refer it like <code class="prettyprint">&lt;refer class="sec-Test"&gt;&lt;/refer&gt;</code> <refer class="sec-Test"></refer>.

<div class="p">Class and Id are asigned with [emmet style] like <code>##[.class0.class1.hiden#sec-Test] Section head</code>.</div>

```[.lang-html]
##[.class0#sec-Test] Section with class and id
```/

## Predifined section: "PH", "TOC", "RRA", "COTD"

There are three predefined sections. "PH": Posting History, "TOC": Table of Contents, "RRA": References and Related Articles, "COTD": Categories of this document. Possibly I will add more predefined sections which can be used frequently.

See the predefined sections implemented below, and you can easily figure it out how to use it.

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

To avoid section numbering, do it like this.

```[.lang-html]
##[.no-sec-N#sec-No-sec-numbering] No section numbering (class="no-sec-N")
```/

###[#subsec-No-sec-numbering] SubSection of [.no-sec-N#sec-No-sec-numbering]

```[.lang-html]
###[#subsec-No-sec-numbering] SubSection of [.no-sec-N#sec-No-sec-numbering]
```/

####[#subsubsec-No-sec-numbering] SubSubSection of [.no-sec-N#sec-No-sec-numbering]

```[.lang-html]
####[#subsubsec-No-sec-numbering] SubSubSection of [.no-sec-N#sec-No-sec-numbering]
```/

## Citing RRA and Refering HTML elements with id.

```[.linenums.lang-html]
&lt;div class="p"&gt;
Ref. &lt;cite class="ref-docuK"&gt;&lt;/cite&gt;, Ref. &lt;cite class="ref-docuKShort"&gt;&lt;/cite&gt;.
&lt;/div&gt;

&lt;div class="p"&gt;
Eq. &lt;refer class="eqq-1"&gt;&lt;/refer&gt;, Eq. &lt;refer class="eqq-2"&gt;&lt;/refer&gt;.
&lt;/div&gt;

&lt;div class="p"&gt;
Fig. &lt;refer class="fig-1"&gt;&lt;/refer&gt;
&lt;/div&gt;

&lt;div class="p"&gt;
Code: &lt;refer class="code-1"&gt;&lt;/refer&gt;
&lt;/div&gt;

&lt;div class="p"&gt;
Sec. &lt;refer class="sec-Test"&gt;&lt;/refer&gt;, Sec. &lt;refer class="sec-No-sec-numbering"&gt;&lt;/refer&gt;, SubSec. &lt;refer class="subsec-No-sec-numbering"&gt;&lt;/refer&gt;, SubSubSec. &lt;refer class="subsubsec-No-sec-numbering"&gt;&lt;/refer&gt;
&lt;/div&gt;
```/

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

There are the blow HTML elments in this <code>docuK.SEE</code>.

```[.linenums.lang-html]
&lt;!-- ## RRA with ol.refs --&gt;
&lt;ol class="refs"&gt;
&lt;div class="subsec"&gt;&lt;h3&gt;Main&lt;/h3&gt;&lt;/div&gt;
	&lt;li id="ref-docuK"&gt;&lt;a href="https://kipid.tistory.com/entry/HTML-docuK-format-ver-20"&gt;kipid's blog - HTML docuK format ver. 2.1&lt;/a&gt;;&lt;br&gt;
		// Updated regularly&lt;/li&gt;
&lt;/ol&gt;

&lt;!-- ## eqq tag (LaTeX equations) --&gt;
&lt;span class="emph"&gt;&lt;eqq id="eqq-1"&gt;
	\alpha \beta = \int f(\gamma) dx \sum_i \hat{H}_i
&lt;/eqq&gt;&lt;/span&gt;

&lt;eqq id="eqq-2"&gt;
\begin{split}
	\vec{x} &amp;= x^{\bar{i}} \vec{e}_{\bar{i}} = x \vec{e}_x + y \vec{e}_y + z \vec{e}_z \\
		&amp;= x^{i} \vec{e}_{i} = r \vec{e}_r + \theta \vec{e}_{\theta} + \phi \vec{e}_{\phi} \\
		&amp;= x^{i'} \vec{e}_{i'} = u \vec{e}_u + v \vec{e}_v + w \vec{e}_w \\
\end{split}
&lt;/eqq&gt;

&lt;!-- ## figure tag (img or iframe such as youtube video) --&gt;
&lt;figure id="fig-1"&gt;&lt;div class="fig"&gt;
	&lt;img delayed-src="https://blog.kakaocdn.net/dn/bfXXOe/btr2D5LJWv8/8QVkGacKxfeA04512qPFk1/img.png" alt="img with delayed-src"&gt;
	&lt;div class="caption"&gt;Caption.&lt;/div&gt;
&lt;/div&gt;&lt;/figure&gt;

&lt;!-- ## div tag with span.number HTML element. (span.number is cited as a text.) --&gt;
&lt;div id="code-1"&gt;&lt;span class="number"&gt;Java vertx server code example&lt;/span&gt;

```[.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) -&gt; {
			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("&lt;h1&gt;Hello World&lt;/h1&gt;");
			req.response().close();
		}).listen(1001);
	}

///////////////////////////////////////////////
	// Called when the verticle is undeployed.
	///////////////////////////////////////////////
	@Override
	public void stop(){
		// do something.
	}
}
```\/ // Hack to avoid closing "```" code.

&lt;/div&gt;
```/

## PH

###/ Posting History

Posting History is put here. This section is automatically hiden.

<ul>
	<li>Posting History is put here.</li>
	<li>2014-06-18: First posting.</li>
</ul>

##/ Posting History

## TOC

TOC is a self-closing section, i.e. no other texts can be put inside.
Next text will be out of TOC.

##/ Table of Contents.
Table will be automatically filled up.

## RRA

###/ References and Related Articles

<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-docuKGithub"><a href="https://github.com/kipid/docuK">github.com - kipid - docuK</a></li>
<div class="subsec"><h3>Supported by</h3></div>
	<li id="ref-jQuery"><a href="http://jquery.com/">jQuery.com</a>; and <a href="http://jquery.com/download/">jQuery - download</a>;<br>
		// JavaScript enhancer</li>
	<li id="ref-mathjax"><a href="http://www.mathjax.org/">MathJax.org</a>; and <a href="http://docs.mathjax.org/en/latest/index.html">MathJax Documentation - latest</a>; and <a href="http://docs.mathjax.org/en/latest/options/hub.html">The Core Configuration Options</a>; and <a href="http://docs.mathjax.org/en/latest/api/hub.html">The MathJax.Hub Object</a>;<br>
		// Math renderer.</li>
	<li id="ref-googleCodePrettyfy"><a href="https://code.google.com/p/google-code-prettify/">Google Code Prettify</a> and <a href="https://code.google.com/p/google-code-prettify/wiki/GettingStarted">Getting Started</a>;<br>
		// Code prettyfier.</li>
<div class="subsec"><h3>API documentation</h3></div>
	<li id="ref-jQuery-contents"><a href="http://api.jquery.com/contents/">jQuery - contents()</a>: Get array of immediate children of element, including text nodes.</li>
	<li id="ref-MDN-css-reference"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">MDN - CSS full reference</a>; and especially <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> is useful. Ex: <code class="prettyprint">element:nth-of-type(an + b) { style properties }</code> <code class="prettyprint">element:nth-child(an + b) { style properties }</code></li>
<div class="subsec"><h3>Other markdown/markup languages</h3></div>
	<li id="ref-latex"><a href="https://kipid.tistory.com/entry/introducing-LaTeX-and-Guides">LaTeX(라텍스, 레이텍) 소개 및 설명서(Guide)들</a>, 2014-03-24<br>
		// 다른 이런류의 편집기가 많긴 하지만, 그 기원(?)이라고 할 수 있는게 TeX/LaTeX 일듯. 그런데 이건 책이나 논문을 만드는데 목적을 두고 만들어진 것이라서 pdf 같은걸로 결과물을 주기 때문에 인터넷, IT 기기에서 사용하기에는 부적합해 보이기도.<br>
		// 그래도 문법은 차용해서 쓰기 좋음.</li>
	<li><a href="http://www.wikipedia.org/">wikipedia.org</a>;<br>
		// Wikipedia uses its own markdown language.</li>
	<li><a href="https://stackoverflow.com/">stackoverflow.com</a>;<br>
		// Stack Overflow uses its own markdown language.</li>
	<li><a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">GitHub/adam-p - Markdown (GitHub)</a>; and <a href="http://markdown-here.com/livedemo.html">live demo page</a><br>
		// This might be used in GitHub wiki.</li>
</ol>

##/ 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] Initially Hiden Section

With hiden class, the section will be hiden initially.

## Raw HTML

Since learning and remembering something new takes time, this is designed to be just as simple as possible. And as what this actually do is simply renderring/making a text to the HTML format, new grammers will be minimized by adopting raw HTML grammers.

<div class="p">
Raw HTML can be added like this. A paragraph starting with '&lt;' will be appended without any change.
</div>

Raw text is appended as a paragraph, enclosed by <code class="prettyprint">&lt;div class="p"&gt;&lt;/div&gt;</code>.

This is default comment box: <code class="prettyprint">&lt;div class="cmt"&gt;&lt;/div&gt;</code>.

You can put multiple paragraphs and nested htmls.

<ul>
	<li>Unordered list 1.</li>
	<li>Unordered list 2.</li>
</ul>
<ol>
	<li>Ordered list 1.</li>
	<li>Ordered list 2.</li>
</ol>

This is it.

</div>

This is default 'be careful' box: <code class="prettyprint">&lt;div class="bcf"&gt;&lt;/div&gt;</code>.

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

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

## Maths or Equations

Maths or Equations can be put by using \$TeX math\$, <code class="prettyprint">&lt;eq&gt;TeX math&lt;/eq&gt;</code>, and <code class="prettyprint">&lt;eqq&gt;TeX math&lt;/eqq&gt;</code>.

The first two are converted to <span class="emph">inline maths like $\alpha \beta = \int f(\gamma) dx \sum_i \hat{H}_i$. The last one</span> is converted to outline math like

<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} &amp;= x^{\bar{i}} \vec{e}_{\bar{i}} = x \vec{e}_x + y \vec{e}_y + z \vec{e}_z \\
		&amp;= x^{i} \vec{e}_{i} = r \vec{e}_r + \theta \vec{e}_{\theta} + \phi \vec{e}_{\phi} \\
		&amp;= x^{i'} \vec{e}_{i'} = u \vec{e}_u + v \vec{e}_v + w \vec{e}_w \\
\end{split}
</eqq>

## Codes

Codes can be pretty-printed.

Using <code class="prettyprint">&lt;pre class="prettyprint scrollable lang-java"&gt;Codes to be pretty-printed.&lt;/pre&gt;</code>,

<pre class="prettyprint 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;

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

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

<div id="code-1"><span class="number">Java vertx server code example</span>

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

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

</div>

## Fuzzy Search of Contents of the SEE document

You can easily fuzzy-search contents of the SEE document with FS (<span class="bold">G</span>o: shortkey <span class="bold">G</span>).

## Header, Footer (Promoting recoeve.net)

In header and footer, there are promotions of <a target="_blank" href="https://recoeve.net/">recoeve.net</a>.

You can set the recoeve page of yours with <code>k.recoeveUserId="your-recoeve-id";</code>, and <code>k.recoCats="Current pages categories, ; separated multiple categories"</code>.

You can disable these promotions with <code>k.printMode=true</code> setting.

In this page, I set the recoeve-related variables like the below.

```
k.printMode=false;
k.recoeveUserId="kipid";
k.recoCats="[IT/Programming]--MarkDown--docuK SEE (Super Easy Edit)";
```/

So the iframe pages in the header and footer will be <a target="_blank" href="https://recoeve.net/user/kipid/mode/multireco?cat=%5BIT%2FProgramming%5D--MarkDown--docuK%20SEE%20(Super%20Easy%20Edit)&amp;ToR=#numbers-of-recos">[IT/Programming]--MarkDown--docuK SEE (Super Easy Edit) of kipid's Recoeve.net (multireco mode)</a>.

The default value of <code>k.recoeveUserId="kipid"</code> and <code>k.recoCats="[Music/Break]--K-Pop"</code>, when those are not set or empty.
</codeprint>

<codeprint id="docuK-script">
<script>
(function(m, $, undefined) {

// Some codes used only in this document. i.e. Filling the pre#pre0-SEE and textarea#textarea-full-SEE

k.printMode=false;
k.recoeveUserId="";
k.recoCats="";
k.wait=1024;
k.delayPad=512;

/**
 *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
 *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
**/
window.disqus_config=function () {
	this.page.identifier="pure-SEE"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
	this.page.url=`https://kipid.tistory.com/entry/${this.page.identifier}`; // Replace PAGE_URL with your page's canonical URL variable
};
})(window.m, jQuery);
</script>

<script src="https://tistory3.daumcdn.net/tistory/1468360/skin/images/docuK-postProcess-2.3.js" charset="utf-8"></script>
</codeprint>

▲ Hide

T PH.Posting History

▼ Show/Hide

T COTD.Categories of this document

▼ Show/Hide

T 4.Warning

▼ Show/Hide

In this live demo, there is some limitations. Delayed loading, browser-info, code prettyprint, maths, and possibly some additional javascript codes which are called only once in the beginning (docuK-prepare.js), or which are using k.variables already asigned before, will not work in the afterward rendering.

Only k.docuKProcess() will be called in this demo example. But when you put "docuK HTML part" into a html file or post it to blogs (which allows script), the full feature of docuK will be loaded and every functionality of docuK will work.

▲ Hide

1.Abstract | Description of docuK and SEE

2.SEE (Super Easy Edit) code only

3.Full SEE code of docuK (Including javascript and CSS links. Stand alone document|html file.)

PH.Posting History

COTD.Categories of this document

4.Warning

5.Statement

6.DocuK and sections

7.Section with class and id

8.Predifined section: "PH", "TOC", "RRA", "COTD"

No-sec-numbering.No section numbering (class="no-sec-N")

No-sec-numbering.1.SubSection of [.no-sec-N#sec-No-sec-numbering]

No-sec-numbering.1.1.SubSubSection of [.no-sec-N#sec-No-sec-numbering]

9.Citing RRA and Refering HTML elements with id.

PH.Posting History

Refs.References and Related Articles

Refs.1.Main

Refs.2.Supported by

Refs.3.API documentation

Refs.4.Other markdown/markup languages

10.head (h2) of section

10.1.head (h3) of subsection

10.1.1.head (h4) of subsubsection

11.Initially Hiden Section

12.Raw HTML

13.Links | URLs to appropriate html

14.Figures

15.Maths or Equations

16.Codes

17.Fuzzy Search of Contents of the SEE document

18.Header, Footer (Promoting recoeve.net)

T 5.Statement

▼ Show/Hide

Each statement or paragraph is splitted by double (or more than double) enters, e.g. /\n\n+/.

If '#' and '<' comes first in a statement, the paragraph will be specially treated.

▲ Hide

T 6.DocuK and sections

▼ Show/Hide

'#' indicates docuK, and '##' | '###' | '####' to sec | subsec | subsubsec.

End of docuK: '#/', and end of section | subsec | subsubsec: '##/' | '###/' | '####/' are optional. Renderer detects end of something automatically according the hierarchy.

End of something can be used as comments. Text after '#/' is ignored. Therefore use '#####/' for super concrete comment. Or just end of something which are not yet opened is OK.

The following is ignored, as you see it in the rendered docuK.

▲ Hide

T 7.Section with class and id

▼ Show/Hide

Section can have class and id attributes. Using the id, you can refer it like <refer class="sec-Test"></refer> .

Class and Id are asigned with [emmet style] like ##[.class0.class1.hiden#sec-Test] Section head.

##[.class0#sec-Test] Section with class and id

▲ Hide

T 8.Predifined section: "PH", "TOC", "RRA", "COTD"

▼ Show/Hide

See the predefined sections implemented below, and you can easily figure it out how to use it.

▲ Hide

T No-sec-numbering.No section numbering (class="no-sec-N")

▼ Show/Hide

To avoid section numbering, do it like this.

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

T No-sec-numbering.1.SubSection of [.no-sec-N#sec-No-sec-numbering]

###[#subsec-No-sec-numbering] SubSection of [.no-sec-N#sec-No-sec-numbering]

T No-sec-numbering.1.1.SubSubSection of [.no-sec-N#sec-No-sec-numbering]

####[#subsubsec-No-sec-numbering] SubSubSection of [.no-sec-N#sec-No-sec-numbering]

▲ Hide

T 9.Citing RRA and Refering HTML elements with id.

▼ Show/Hide

<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. ( No refer. ).

Eq. , Eq. .

Fig.

Code:

Sec. , Sec. , SubSec. , SubSubSec.

There are the blow HTML elments in this docuK.SEE.

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

▲ Hide

T PH.Posting History

▼ Show/Hide

1.Abstract | Description of docuK and SEE

2.SEE (Super Easy Edit) code only

3.Full SEE code of docuK (Including javascript and CSS links. Stand alone document|html file.)

PH.Posting History

COTD.Categories of this document

4.Warning

5.Statement

6.DocuK and sections

7.Section with class and id

8.Predifined section: "PH", "TOC", "RRA", "COTD"

No-sec-numbering.No section numbering (class="no-sec-N")

No-sec-numbering.1.SubSection of [.no-sec-N#sec-No-sec-numbering]

No-sec-numbering.1.1.SubSubSection of [.no-sec-N#sec-No-sec-numbering]

9.Citing RRA and Refering HTML elements with id.

PH.Posting History

Refs.References and Related Articles

Refs.1.Main

Refs.2.Supported by

Refs.3.API documentation

Refs.4.Other markdown/markup languages

10.head (h2) of section

10.1.head (h3) of subsection

10.1.1.head (h4) of subsubsection

11.Initially Hiden Section

12.Raw HTML

13.Links | URLs to appropriate html

14.Figures

15.Maths or Equations

16.Codes

17.Fuzzy Search of Contents of the SEE document

18.Header, Footer (Promoting recoeve.net)

TOC is a self-closing section, i.e. no other texts can be put inside. Next text will be out of TOC.

T Refs.References and Related Articles

▼ Show/Hide

T Refs.1.Main

Ref. [01] kipid's blog - HTML docuK format ver. 2.1;
// Updated regularly
Ref. [02] github.com - kipid - docuK

T Refs.2.Supported by

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

T Refs.3.API documentation

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

T Refs.4.Other markdown/markup languages

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

▲ Hide

T 10.head (h2) of section

▼ Show/Hide

section contents

T 10.1.head (h3) of subsection

contents of subsection

T 10.1.1.head (h4) of subsubsection

contents of subsubsection

▲ Hide

T 11.Initially Hiden Section

▼ Show/Hide

T 12.Raw HTML

▼ Show/Hide

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

▲ Hide

T 13.Links | URLs to appropriate html

▼ Show/Hide

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.

▲ Hide

T 14.Figures

▼ Show/Hide

▲ Hide

T 15.Maths or Equations

▼ Show/Hide

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

(15-1)

\[ \alpha \beta = \int f(\gamma) dx \sum_i \hat{H}_i \]

(15-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} \]

▲ Hide

T 16.Codes

▼ Show/Hide

Codes can be pretty-printed.

Using <pre class="prettyprint scrollable lang-java">Codes to be pretty-printed.</pre>,

On the left side of codes is there a hiden button to toggle/switch scrollability ({max-height:some} or {max-height:none}).

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

On the left side of codes is there a hiden button to toggle/switch scrollability ({max-height:some} or {max-height:none}).

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

▲ Hide

T 17.Fuzzy Search of Contents of the SEE document

▼ Show/Hide

You can easily fuzzy-search contents of the SEE document with FS (Go: shortkey G).

▲ Hide

T 18.Header, Footer (Promoting recoeve.net)

▼ Show/Hide

In header and footer, there are promotions of recoeve.net.

You can set the recoeve page of yours with k.recoeveUserId="your-recoeve-id";, and k.recoCats="Current pages categories, ; separated multiple categories".

You can disable these promotions with k.printMode=true setting.

In this page, I set the recoeve-related variables like the below.

k.printMode=false;
k.recoeveUserId="kipid";
k.recoCats="[IT/Programming]--MarkDown--docuK SEE (Super Easy Edit)";

So the iframe pages in the header and footer will be [IT/Programming]--MarkDown--docuK SEE (Super Easy Edit) of kipid's Recoeve.net (multireco mode).

The default value of k.recoeveUserId="kipid" and k.recoCats="[Music/Break]--K-Pop", when those are not set or empty.

▲ Hide

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

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

week5 위클리 페이퍼 (useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명, 리액트 생명주기 (life cycle) 에 대해 설명, React 에서 배열을 렌더링할 때 key 를 설정해야 하는 이유와 key 설정 시 주의할 점을 설명) (0)	2024.09.03
JavaScript 중급 서술형 평가 (자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명, 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명, 브라우저가 어떻게 동작하는지 설명, 이벤트 버블링과 캡처링을 설명하고 이를 방지하기 위한 방법을 서술, 프로미스(Promise)의 3가지 상태에 대해 설명) (0)	2024.08.31
마지막이 ```/ 로 끝나면 error 나는거 해결합시다. (3)	2024.08.30
인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog) (4)	2024.08.30
React 사용 설정하기 (esbuild) with TypeScript (0)	2024.08.29
Rotating circles using CSS (Spinner, @keyframes, @-moz-keyframes, @-webkit-keyframes) (0)	2024.08.28
Super Easy Edit (SEE) of docuK: 사용 설명서 (Manual \| Documentation \| Tutorial). (2)	2024.08.26

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial).

pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial).

T1.Abstract | Description of docuK and SEE

T2.SEE (Super Easy Edit) code only

T3.Full SEE code of docuK (Including javascript and CSS links. Stand alone document|html file.)

T4.Warning

Table of Contents

T5.Statement

T6.DocuK and sections

T7.Section with class and id

T8.Predifined section: "PH", "TOC", "RRA", "COTD"

TNo-sec-numbering.1.SubSection of [.no-sec-N#sec-No-sec-numbering]

TNo-sec-numbering.1.1.SubSubSection of [.no-sec-N#sec-No-sec-numbering]

T9.Citing RRA and Refering HTML elements with id.

Table of Contents

TRefs.1.Main

TRefs.2.Supported by

TRefs.3.API documentation

TRefs.4.Other markdown/markup languages

T10.head (h2) of section

T10.1.head (h3) of subsection

T10.1.1.head (h4) of subsubsection

T11.Initially Hiden Section

T12.Raw HTML

T13.Links | URLs to appropriate html

T14.Figures

T15.Maths or Equations

T16.Codes

T17.Fuzzy Search of Contents of the SEE document

T18.Header, Footer (Promoting recoeve.net)

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

'[IT/Programming]/HTML related' Related Articles

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

T 1.Abstract | Description of docuK and SEE

T 2.SEE (Super Easy Edit) code only

T 3.Full SEE code of docuK (Including javascript and CSS links. Stand alone document|html file.)

T 4.Warning

T 5.Statement

T 6.DocuK and sections

T 7.Section with class and id

T 8.Predifined section: "PH", "TOC", "RRA", "COTD"

T No-sec-numbering.1.SubSection of [.no-sec-N#sec-No-sec-numbering]

T No-sec-numbering.1.1.SubSubSection of [.no-sec-N#sec-No-sec-numbering]

T 9.Citing RRA and Refering HTML elements with id.

T Refs.1.Main

T Refs.2.Supported by

T Refs.3.API documentation

T Refs.4.Other markdown/markup languages

T 10.head (h2) of section

T 10.1.head (h3) of subsection

T 10.1.1.head (h4) of subsubsection

T 11.Initially Hiden Section

T 12.Raw HTML

T 13.Links | URLs to appropriate html

T 14.Figures

T 15.Maths or Equations

T 16.Codes

T 17.Fuzzy Search of Contents of the SEE document

T 18.Header, Footer (Promoting recoeve.net)