Super Easy Edit (SEE) of docuK

# Super Easy Edit (SEE) of docuK

쉽게 문서를 작성합시다.

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.

# Working on SEE (Super Easy Edit) The docuK rendered from the current text is represented. Try it yourself: Edit the text and click the button below (or Shift+Enter). ## PH ###/ Posting History Posting History is put here. This section is automatically hiden.

• Posting History is put here.
• 2015-01-03: Cite and Refer. 좀 더 정리.
• 2014-06-18: First posting.

##/ 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. 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 '#', '<', 'http://', or 'https://' comes first in a statement, the paragraph will be specially treated. Furthermore 'http://' or 'https://' even after a single enter (\n) will be treated specially also. (Not yet implemented.) ## DocuK and Section (h2) '#' indicates docuK, and '##' | '###' | '####' to sec | subsec | subsubsec. ### Subsection (h3) End of docuK: '#/', and end of section | subsec | subsubsec: '##/' | '###/' | '####/' are optional. Renderer detects end of something automatically according the hierarchy. #### Subsubsection (h4) Contents of subsubsection ####/ optional end of subsubsection ###/ optional end of subsection ### Comment 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. ### Predifined section: "PH", "RRA", "TOC" There are three predefined sections. "PH": Posting History, "TOC": Table of Contents, "RRA": References and Related Articles. 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. ###[.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 ##[.class0.class1.hiden#sec-Test] Section head.

##/ optional end of section "DocuK and Section (h2)s" ##[.hiden#sec-HidenSec] Initially Hiden Section With hiden class, the section will be hiden initially. ##[#sec-cite-refer] Citing references and Refering anything. You can cite references like with <cite class="ref-docuK"></cite><cite class="ref-docuK-short"></cite><cite class="ref-docuK-github"></cite>. And you can refer anything like section , equation , code . Any html element with id can be refered by using <refer class="id-of-html-element"></refer>. ## 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.

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

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

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

• Unordered list 1.
• Unordered list 2.

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

This is it.

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

## Links | URLs to appropriate html Just use <a href=""></a> right now. Planning to implement this. (Should I implement this?? Not desperately needed, I think.) ###/ 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. ## Maths or Equations by LaTeX format 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 ## Codes to be pretty-printed Codes can be pretty-printed by 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.
	}
}

Or 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.```/,

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

If you want to refer the code, enclose the code with <div id="code-id"><div class="number">Code Name</div> and </div>. And refer it with <refer class="code-id"></refer>. Example: . Similar technique can be applied to any html element. ## More infos 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 kipid.variables already asigned before, will not work in the afterward rendering. Only kipid.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. ## RRA ###/ References and Related Articles

Main

1. kipid's blog - HTML docuK format ver. 2.1;
   // Updated regularly
2. kipid's blog - docuK short copiable version;
   // Updated regularly
3. kipid's blog - Super Easy Edit (SEE) of docuK;
   // Current document
4. kipid's blog - 인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog)
5. github.com - kipid - docuK

Supported by

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

API documentation

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

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

##/ References and Related Articles

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

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