728x90
반응형
# Super Easy Edit (SEE) of docuK (MarkDown): 사용 설명서 (Manual | Documentation | Tutorial).
쉽게 문서를 작성합시다. Download the below file, and learn how to write SEE (Super Easy Edit) of docuK from the file texts. Replacing only
<codeprint class="SEE">...</codeprint><!-- SEE --> part, write well-formatted extended-MarkDown documents easily.
Abstract | Description of docuK and SEE
This is an HTML document format named docuK which is rendered by JavaScript, jQuery, MathJax, and google code prettifier.
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.
Try it yourself
Edit the text and click the button below it to render the text to the docuK HTML format. Then the document will be represented beneath the textfield. You can use
Shift+Enter for rendering. You can copy and paste the code in Copy and Paste where the full stand-alone code is.
For the full stand-alone code, put meta tags additionally
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> for encoding ('utf-8' is recommended. The html file must be saved with the same encoding.) and <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3, user-scalable=yes"/> for mobile view.
- 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>`.
- 2023-09-26 : Update.
- 2023-05-18 : Update.
- 2014-06-18 : First posting.
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.
## 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 '<' 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 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.
###/ 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.
##[.class0#sec-Test] Section with class and id
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
```[.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]
<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>
```/
##[.class0.class1.hiden#sec-Test] Section head.
Ref. , Ref. .
Eq.
Fig.
Code:
Sec.
There are the blow HTML elments in this docuK.SEE.
```[.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. This section is automatically hiden.
- Posting History is put here.
- 2014-06-18: First posting.
- kipid's blog - HTML docuK format ver. 2.1;
// Updated regularly - kipid's blog - docuK short copiable version;
// Updated regularly - github.com - kipid - docuK
- 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. - 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 } - 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.
Main
Supported by
API documentation
Other markdown/markup languages
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 default 'be careful' box:
## 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
<div class="bcf"></div>.
Caption.
<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
<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.
}
}
```/
## Fuzzy Search of Contents of the SEE document
You can easily fuzzy-search contents of the SEE document with FS (Go: shortkey G).
## Header, Footer (Promoting recoeve.net)
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.
# Update History and pure SEE.html file
728x90
반응형
