mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.
82 lines (76 loc) • 6.92 kB
HTML
<html>
<head>
<title>demo.js</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" media="all" href="../../../doc-style.css" />
<script src="../../../doc-filelist.js"></script>
<script>
var relativeDir = "../../../", thisFile = "Users/knut/Documents/source/mermaid/bower_components/dagre-d3/demo/demo.js", defaultSidebar = true;
</script>
<script src="../../../doc-script.js"></script>
<script src="../../../mermaid.js"></script>
<link rel="stylesheet" href="../../../mermaid.css" />
</head>
<body>
<div id="sidebar_wrapper">
<div id="sidebar_switch">
<span class="tree">Files</span>
<span class="headings">Headings</span>
</div>
<div id="tree"></div>
<div id="headings">
<div class="heading h1">
<a href="#demo.js">demo.js</a>
</div>
</div>
</div>
<div id="sidebar-toggle"></div>
<div id="container"><div class="background highlight"></div>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="docs">
<div class="pilwrap" id="demo.js">
<h1>
<a href="#demo.js" name="demo.js" class="pilcrow">¶</a>demo.js
</h1>
</div>
</td>
<td class="code highlight"></td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-1" id="section-1">¶</a>
</div>
</td>
<td class="code highlight"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">bodyElem</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">'body'</span><span class="p">),</span>
<span class="nx">jsElem</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">'#js'</span><span class="p">),</span>
<span class="nx">jsPanel</span> <span class="o">=</span> <span class="nx">bodyElem</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">'div'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'id'</span><span class="p">,</span> <span class="s1">'jsPanel'</span><span class="p">);</span>
<span class="nx">cssElem</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">'#css'</span><span class="p">),</span>
<span class="nx">cssPanel</span> <span class="o">=</span> <span class="nx">bodyElem</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">'div'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'id'</span><span class="p">,</span> <span class="s1">'cssPanel'</span><span class="p">);</span>
<span class="kd">function</span> <span class="nx">setupPanel</span><span class="p">(</span><span class="nx">panel</span><span class="p">,</span> <span class="nx">elem</span><span class="p">,</span> <span class="nx">title</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">panel</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">'h2'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">title</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">panel</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">'pre'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s1">'code'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">elem</span><span class="p">.</span><span class="nx">html</span><span class="p">().</span><span class="nx">trim</span><span class="p">());</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">jsCode</span> <span class="o">=</span> <span class="nx">setupPanel</span><span class="p">(</span><span class="nx">jsPanel</span><span class="p">,</span> <span class="nx">jsElem</span><span class="p">,</span> <span class="s1">'JavaScript'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">cssCode</span> <span class="o">=</span> <span class="nx">setupPanel</span><span class="p">(</span><span class="nx">cssPanel</span><span class="p">,</span> <span class="nx">cssElem</span><span class="p">,</span> <span class="s1">'CSS'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">hljsRoot</span> <span class="o">=</span> <span class="s1">'http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1'</span><span class="p">;</span>
<span class="nx">bodyElem</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">'link'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'rel'</span><span class="p">,</span> <span class="s1">'stylesheet'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'href'</span><span class="p">,</span> <span class="nx">hljsRoot</span> <span class="o">+</span> <span class="s1">'/styles/xcode.min.css'</span><span class="p">);</span>
<span class="nx">bodyElem</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">'script'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'src'</span><span class="p">,</span> <span class="nx">hljsRoot</span> <span class="o">+</span> <span class="s1">'/highlight.min.js'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'load'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">hljs</span><span class="p">.</span><span class="nx">highlightBlock</span><span class="p">(</span><span class="nx">jsCode</span><span class="p">.</span><span class="nx">node</span><span class="p">());</span>
<span class="nx">hljs</span><span class="p">.</span><span class="nx">highlightBlock</span><span class="p">(</span><span class="nx">cssCode</span><span class="p">.</span><span class="nx">node</span><span class="p">());</span>
<span class="p">});</span>
</pre></div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>