High Level HTML
Sexps, Macros, CoffeeScript, TypeScript, Markdown
Click 'Generate' below, then modify and play.
[!index] [h1 XML-syntax sucks, why not make a better html syntax too?] Instead of <i>This text is italicized</i> we say [i this is in italics]. [b [i This works just like you'd expect]]. [! hidden comment] All tags/attributes work. Unimpressed by trimming the end tag? There's more! [h1 This sucks, markdown is easier] No problem, this can take any parser too. Try the "md" tag. [%md #### Yayy *markdown* is now being used from within __high level__ html. //] [h1 Embed CoffeeScript, TypeScript and JavaScript easy!] [span_id="content"] [%coffee #embed javascript `var x=document.getElementById("content")` #coffescript function hello = () -> "Hello world from coffee script!" x.innerHTML=hello() //] [span_id="status"] [%tsc class Greeter { constructor(public greeting: string) { } greet() { return this.greeting; } }; var greeter = new Greeter("Hello world from typescript!"); var str = greeter.greet(); document.getElementById("status").innerHTML = str; //] [span_id="js"] [script document.getElementById("js").innerHTML="Hi from javascript!"; //] Tags that don't take html like "style" or "script" require a "//]" ending. [h1 Adding more compile-to-js languages?] How about a high level table to explain? [tbl ||5c Compiling "Hello world" in different languages || Dart || ClojureScript || js_of_ocaml || Haxe || Compile Time (s) | 8 | 138 | < 2 | ? || File Size (kb) | 103 | 92 (minified) | ? | ? || Safe | Can Be | Yes | No? | No? ] CoffeeScript and TypeScript are convenient because they produce a small output fast. ClojureScipt seems to go faster if I use the ":simple" option, but it produces a huge js dump. Dart could be dangerous because of the io module but I can just delete it. As an online demo I don't want to risk the server going too slow but if I make an offline version it's easy to add anything. [http://altjs.org/ There are a lot of possibilities]. Haxe and js_of_ocaml might be dangerous because they can load stuff from the file system into js. Don't crucify me if I'm wrong, I'm no expert. [h1 HTML Macros] Macros are just simple replacements. The syntax is \[macro whatever_name whatever_content ..] Example: \[macro sayhi Hi there %s.] [macro sayhi Hi there %s.] \[sayhi Bob] -> [sayhi Bob] \[sayhi Joe] -> [sayhi Joe] \[sayhi Cow] -> [sayhi Cow] [h1 We can use google fonts easily ] We load the font: \[google-font http://fonts.googleapis.com/css?family=Finger+Paint] [google-font http://fonts.googleapis.com/css?family=Finger+Paint] We use the font: [Finger+Paint We can use google fonts anywhere if we just import them first with the google-font code] We can use a macro to provide a better name for our google font \[macro myfont \[green \[size40 \[Finger+Paint %s]]]] [macro myfont [green [size40 [Finger+Paint %s]]]] \[myfont It still works.] -> [myfont It still works.] [h1 References] Erlang is awesome[ref=aunt My aunt sue]. It is nice to make parsers with[ref?aunt]. This works fine [ref [//jimmyr.com Me]]. [h1 Syntax] [h2 Python] [%fmtpython import os,re,platform _organize={ 'txt': 'txt,rtf,doc,xls,org,htm,html,odp,odt,pps,ppt,nfo,tex' } //] [h2 Erlang] [%fmterlang add_e1(X, H) when is_list(X) -> H; add_e1(X, #e1{content=[Previous|Content]} = H) when is_binary(Previous) -> H#e1{content=[<<Previous/binary, X/binary>>|Content]}; add_e1(X, #e1{content=Content} = H) -> H#e1{content=[X|Content]}. //] [h2 D] [%fmtd void main() { ulong lines = 0; double sumLength = 0; foreach (line; stdin.byLine()) { ++lines; sumLength += line.length; } writeln("Average line length: ", lines ? sumLength / lines : 0); } //] [h1 Auto <br/> for new lines] Having new lines automatically be replaced with <br/> might annoy some people. It can easily be disabled with \[!br]. This acts as a switch, so using it again will re-enable automatically adding <br/>. Of course you can still add br manually with \[br], disabled or not. Example: [!br]No auto brs[!br] [h1 More Examples.] [div_style="border: 1px dashed #888; padding: 30px; -webkit-border-radius: 17px;-moz-border-radius: 17px;border-radius: 17px;-webkit-box-shadow: 7px 7px 11px #000000;-moz-box-shadow: 7px 7px 11px #000000;box-shadow: 7px 7px 11px #000000;color: #336699;" Changing the color: [+FF0000 Custom Color] Linking to something: [http://jimmyr.com How to make a link] Let me google that: [g It's no problem!] [w Wikipedia too] [span_class="underline"_style="font-weight: bold" All tags and attributes work.] ] [h1 Syntax Transforms] We can add special rules to make common stuff easy to structure. [blist Movie Director: High Profile Guy The Wife: Nicolas Cage The Husband: Nicolas Cage The Child: Nicolas Cage The Enemy: Nicolas Cage ] [dlist * Erlang Distributed Light weight processes * D Fast Multi-paradigm ] [olist Milk Bread Cereal ] [h4 High Level Html ToDo List] This is still a very early work in progress! [list Citing sources Automatically list index of h1-5 tags More parse transforms youtube embed [list_style="border:1px dashed #888" we can have a list inside a list [list inside a list [tbl with | a table inside it ||2c works fine ]]]] [h1 What for? Source?] [p I plan to use this for all future projects. It has an admin mode and a safe user mode that does not allow js and only allows safe style attributes and certain tags. Why use a WYSIWYG editor when you can just fix the annoying parts of html? It doesn't have to be one size fits all or set in stone. Making syntax transforms like the lists and tables shown above is relatively easy and can be done for anything. Adding more parsers like markdown or coffeescript is a one liner change. As far as the source it really depends on if there's much interest. The program is written entirely from scratch in erlang, including the webserver.] [h1 Need to use \[\] a lot in an article? Want to teach it?] [jcode [b [i Use [jcode ..] to disable parsing of certain regions.]] ] [h1 have fun!] [pic http://i.imgur.com/oZ7uc.gif] [pic http://i.imgur.com/e0vuZ.gif]