1
0
mirror of https://git.teknik.io/Teknikode/Teknik.git synced 2023-08-02 14:16:22 +02:00

Updated markdown help.

Updated editor to have same settings as final transform.
This commit is contained in:
Uncled1023 2017-08-11 15:57:43 -07:00
parent 8554648174
commit 028a2d252d
4 changed files with 133 additions and 77 deletions

View File

@ -2,7 +2,10 @@
$("textarea.mdd_editor").MarkdownDeep({
help_location: helpURL,
disableTabHandling: false,
resizebar: false
resizebar: false,
SafeMode: true,
ExtraMode: true,
MarkdownInHtml: true
});
$("#comment_submit").click(function () {

View File

@ -10,130 +10,179 @@
<div class="row">
<h2>Markdown Formatting</h2>
<p><a href="http://daringfireball.net/projects/markdown/" target="_blank">Markdown</a> turns plain text formatting into fancy HTML formatting.</p>
<h3>Phrase Emphasis</h3>
<pre><code>*italic* **bold**
_italic_ __bold__
</code></pre>
_italic_ __bold__</code></pre>
<h3>Links</h3>
<p>Inline:</p>
<pre><code>An [example](http://url.com/ &quot;Title&quot;)
</code></pre>
<pre><code>An [example](http://url.com/ &quot;Title&quot;)</code></pre>
<p>Reference-style labels (titles are optional):</p>
<pre><code>An [example][id]. Then, anywhere
else in the doc, define the link:
[id]: http://example.com/ &quot;Title&quot;
</code></pre>
<pre><code>An [example][id].
Then, anywhere else in the doc, define the link:
[id]: http://example.com/ &quot;Title&quot;</code></pre>
<h3>Images</h3>
<p>Inline (titles are optional):</p>
<pre><code>![alt text](/path/img.jpg &quot;Title&quot;)
</code></pre>
<pre><code>![alt text](/path/img.jpg &quot;Title&quot;)</code></pre>
<p>Reference-style:</p>
<pre><code>![alt text][id]
[id]: /url/to/img.jpg &quot;Title&quot;
</code></pre>
[id]: /url/to/img.jpg &quot;Title&quot;</code></pre>
<h3>Headers</h3>
<p>Setext-style:</p>
<pre><code>Header 1
========
Header 2
--------
</code></pre>
========
Header 2
--------</code></pre>
<p>atx-style (closing #'s are optional):</p>
<pre><code># Header 1 #
## Header 2 ##
###### Header 6
</code></pre>
## Header 2 ##
###### Header 6</code></pre>
<h3>Lists</h3>
<p>Ordered, without paragraphs:</p>
<pre><code>1. Foo
2. Bar
</code></pre>
2. Bar</code></pre>
<p>Unordered, with paragraphs:</p>
<pre><code>* A list item.
With multiple paragraphs.
* Bar
</code></pre>
With multiple paragraphs.
* Bar</code></pre>
<p>You can nest them:</p>
<pre><code>* Abacus
* answer
* Bubbles
1. bunk
2. bupkis
* BELITTLER
3. burper
* Cunning
</code></pre>
* answer
* Bubbles
1. bunk
2. bupkis
* BELITTLER
3. burper
* Cunning</code></pre>
<h3>Blockquotes</h3>
<pre><code>&gt; Email-style angle brackets
&gt; are used for blockquotes.
&gt; &gt; And, they can be nested.
&gt; #### Headers in blockquotes
&gt;
&gt; * You can quote a list.
&gt; * Etc.
</code></pre>
&gt; are used for blockquotes.
&gt; &gt; And, they can be nested.
&gt; #### Headers in blockquotes
&gt;
&gt; * You can quote a list.
&gt; * Etc.</code></pre>
<h3>Code Spans</h3>
<pre><code>`&lt;code&gt;` spans are delimited
by backticks.
You can include literal backticks
like `` `this` ``.
</code></pre>
<pre><code>`&lt;code&gt;` spans are delimited by backticks.
You can include literal backticks like `` `this` ``.</code></pre>
<h3>Preformatted Code Blocks</h3>
<p>Indent every line of a code block by at least 4 spaces or 1 tab.</p>
<pre><code>This is a normal paragraph.
This is a preformatted
code block.
</code></pre>
This is a preformatted
code block.</code></pre>
<h3>Horizontal Rules</h3>
<p>Three or more dashes or asterisks:</p>
<pre><code>---
* * *
- - - -
</code></pre>
* * *
- - - - </code></pre>
<h3>Manual Line Breaks</h3>
<p>End a line with two or more spaces:</p>
<pre><code>Roses are red,
Violets are blue.
</code></pre>
<h2>Extra Mode</h2>
These formatting features are only available when Extra Mode is enabled.
Violets are blue.</code></pre>
<h3>Markdown In Html</h3>
<p>Enable markdown in HTML block level elements:</p>
<pre><code>&lt;div markdown=&quot;1&quot;&gt;
Markdown **still** works.
&lt;/div&gt;
</code></pre>
Markdown **still** works.
&lt;/div&gt;</code></pre>
<h3>Fenced Code Blocks</h3>
<p>Code blocks delimited by 3 or more tildas:</p>
<pre><code>~~~
This is a preformatted
code block
~~~
</code></pre>
This is a preformatted
code block
~~~</code></pre>
<h3>Header IDs</h3>
<p>Set the id of headings with <code>{#&lt;id&gt;}</code> at end of heading line:</p>
<pre><code>## My Heading {#myheading}
</code></pre>
<pre><code>## My Heading {#myheading}</code></pre>
<h3>Tables</h3>
<pre><code>Fruit |Color
---------|----------
Apples |Red
Pears |Green
Bananas |Yellow</code></pre>
---------|----------
Apples |Red
Pears |Green
Bananas |Yellow</code></pre>
<h3>Definition Lists</h3>
<pre><code>Term 1
: Definition 1
Term 2
: Definition 2</code></pre>
: Definition 1
Term 2
: Definition 2</code></pre>
<h3>Footnotes</h3>
<pre><code>Body text with a footnote [^1]
[^1]: Footnote text here
</code></pre>
[^1]: Footnote text here</code></pre>
<h3>Abbreviations</h3>
<pre><code>MDD &lt;- will have title
*[MDD]: MarkdownDeep
</code></pre>
<p>&nbsp;</p>
*[MDD]: MarkdownDeep</code></pre>
<h3>Allowed HTML Tags</h3>
<ul>
<li>a [href, title, class]</li>
<li>b</li>
<li>blockquote</li>
<li>code</li>
<li>dd</li>
<li>dt</li>
<li>dl</li>
<li>del</li>
<li>em</li>
<li>h1</li>
<li>h2</li>
<li>h3</li>
<li>h4</li>
<li>h5</li>
<li>h6</li>
<li>i</li>
<li>img [src, width, height, alt, title, clas]</li>
<li>kbd</li>
<li>li</li>
<li>ol</li>
<li>ul</li>
<li>p</li>
<li>pre</li>
<li>s</li>
<li>sub</li>
<li>sup</li>
<li>strong</li>
<li>strike</li>
</ul>
</div>
</div>

View File

@ -2,7 +2,10 @@
$("textarea.mdd_editor").MarkdownDeep({
help_location: helpURL,
disableTabHandling: false,
resizebar: false
resizebar: false,
SafeMode: true,
ExtraMode: true,
MarkdownInHtml: true
});
$('.hideContent').each(function () {

View File

@ -20,6 +20,7 @@ namespace Teknik.Utilities
var markdownTransformer = new Markdown();
markdownTransformer.ExtraMode = true;
markdownTransformer.SafeMode = true;
markdownTransformer.MarkdownInHtml = true;
string html = markdownTransformer.Transform(text);
// Wrap the html in an MvcHtmlString otherwise it'll be HtmlEncoded and displayed to the user as HTML :(