Added Markdown underline & highlight

Merge pull request #13 from sb745/markdown-ins-and-mark

nyaa/static/css/main.css

@@ -638,6 +638,12 @@ blockquote {
 	font-size: inherit;
 }
 
+/* Make <mark>s a bit more prominent */
+mark, .mark {
+    background-color: #fff6c9;
+    padding: .2em;
+}
+
 /* Hide and resize some things on tiny screens to improve usability. */
 @media (max-width: 767px) {
 	.hdr-size, .hdr-date, .hdr-downloads,

nyaa/static/js/lib/markdown-it-ins.min.js

@@ -0,0 +1,2 @@
+/*! markdown-it-ins 2.0.0 https://github.com//markdown-it/markdown-it-ins @license MIT */
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,n.markdownitIns=e()}}(function(){return function e(n,t,o){function r(s,f){if(!t[s]){if(!n[s]){var u="function"==typeof require&&require;if(!f&&u)return u(s,!0);if(i)return i(s,!0);var l=new Error("Cannot find module '"+s+"'");throw l.code="MODULE_NOT_FOUND",l}var p=t[s]={exports:{}};n[s][0].call(p.exports,function(e){var t=n[s][1][e];return r(t?t:e)},p,p.exports,e,n,t,o)}return t[s].exports}for(var i="function"==typeof require&&require,s=0;s<o.length;s++)r(o[s]);return r}({1:[function(e,n,t){"use strict";n.exports=function(e){function n(e,n){var t,o,r,i,s,f=e.pos,u=e.src.charCodeAt(f);if(n)return!1;if(43!==u)return!1;if(o=e.scanDelims(e.pos,!0),i=o.length,s=String.fromCharCode(u),2>i)return!1;for(i%2&&(r=e.push("text","",0),r.content=s,i--),t=0;i>t;t+=2)r=e.push("text","",0),r.content=s+s,e.delimiters.push({marker:u,jump:t,token:e.tokens.length-1,level:e.level,end:-1,open:o.can_open,close:o.can_close});return e.pos+=o.length,!0}function t(e){var n,t,o,r,i,s=[],f=e.delimiters,u=e.delimiters.length;for(n=0;u>n;n++)o=f[n],43===o.marker&&-1!==o.end&&(r=f[o.end],i=e.tokens[o.token],i.type="ins_open",i.tag="ins",i.nesting=1,i.markup="++",i.content="",i=e.tokens[r.token],i.type="ins_close",i.tag="ins",i.nesting=-1,i.markup="++",i.content="","text"===e.tokens[r.token-1].type&&"+"===e.tokens[r.token-1].content&&s.push(r.token-1));for(;s.length;){for(n=s.pop(),t=n+1;t<e.tokens.length&&"ins_close"===e.tokens[t].type;)t++;t--,n!==t&&(i=e.tokens[t],e.tokens[t]=e.tokens[n],e.tokens[n]=i)}}e.inline.ruler.before("emphasis","ins",n),e.inline.ruler2.before("emphasis","ins",t)}},{}]},{},[1])(1)});

nyaa/static/js/lib/markdown-it-mark.min.js

@@ -0,0 +1,2 @@
+/*! markdown-it-mark 2.0.0 https://github.com//markdown-it/markdown-it-mark @license MIT */
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,n.markdownitMark=e()}}(function(){return function e(n,t,o){function r(s,f){if(!t[s]){if(!n[s]){var u="function"==typeof require&&require;if(!f&&u)return u(s,!0);if(i)return i(s,!0);var l=new Error("Cannot find module '"+s+"'");throw l.code="MODULE_NOT_FOUND",l}var p=t[s]={exports:{}};n[s][0].call(p.exports,function(e){var t=n[s][1][e];return r(t?t:e)},p,p.exports,e,n,t,o)}return t[s].exports}for(var i="function"==typeof require&&require,s=0;s<o.length;s++)r(o[s]);return r}({1:[function(e,n,t){"use strict";n.exports=function(e){function n(e,n){var t,o,r,i,s,f=e.pos,u=e.src.charCodeAt(f);if(n)return!1;if(61!==u)return!1;if(o=e.scanDelims(e.pos,!0),i=o.length,s=String.fromCharCode(u),2>i)return!1;for(i%2&&(r=e.push("text","",0),r.content=s,i--),t=0;i>t;t+=2)r=e.push("text","",0),r.content=s+s,e.delimiters.push({marker:u,jump:t,token:e.tokens.length-1,level:e.level,end:-1,open:o.can_open,close:o.can_close});return e.pos+=o.length,!0}function t(e){var n,t,o,r,i,s=[],f=e.delimiters,u=e.delimiters.length;for(n=0;u>n;n++)o=f[n],61===o.marker&&-1!==o.end&&(r=f[o.end],i=e.tokens[o.token],i.type="mark_open",i.tag="mark",i.nesting=1,i.markup="==",i.content="",i=e.tokens[r.token],i.type="mark_close",i.tag="mark",i.nesting=-1,i.markup="==",i.content="","text"===e.tokens[r.token-1].type&&"="===e.tokens[r.token-1].content&&s.push(r.token-1));for(;s.length;){for(n=s.pop(),t=n+1;t<e.tokens.length&&"mark_close"===e.tokens[t].type;)t++;t--,n!==t&&(i=e.tokens[t],e.tokens[t]=e.tokens[n],e.tokens[n]=i)}}e.inline.ruler.before("emphasis","mark",n),e.inline.ruler2.before("emphasis","mark",t)}},{}]},{},[1])(1)});

nyaa/static/js/main.js

@@ -225,7 +225,7 @@ var markdownOptions = {
 	linkify: true,
 	typographer:  true
 }
-var markdown = window.markdownit(markdownOptions);
+var markdown = window.markdownit(markdownOptions).use(window.markdownitIns).use(window.markdownitMark);
 markdown.renderer.rules.table_open = function (tokens, idx) {
 	// Format tables nicer (bootstrap). Force auto-width (default is 100%)
 	return '<table class="table table-striped table-bordered" style="width: auto;">';

nyaa/templates/_formhelpers.html

@@ -35,7 +35,7 @@
 {% endif %}
 	<div class="markdown-editor" id="{{ field_name }}-markdown-editor" data-field-name="{{ field_name }}">
 		{{ field.label(class='control-label') }}
-		<a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" class="small" target="_blank">Markdown supported</a>
+		<a href="{{ url_for('site.help', _anchor='styling') }}" class="small" target="_blank">Markdown supported</a>
 		<ul class="nav nav-tabs" role="tablist">
 			<li role="presentation" class="active">
 				<a href="#{{ field_name }}-tab" role="tab" data-toggle="tab">

nyaa/templates/help.html

@@ -85,6 +85,23 @@
 	to have an image embedded in your comment or description. Note the <kbd>!</kbd>
 	exclamation mark at the beginning, denoting that this link is an image.
 </div>
+<div>
+	Quick examples:
+</div>
+<div>
+	<ul>
+		<li><kbd>*italic text*</kbd> &rarr; <em>italic text</em></li>
+		<li><kbd>**bold text**</kbd> &rarr; <strong>bold text</strong></li>
+		<li><kbd>++underlined text++</kbd> &rarr; <ins>underlined text</ins></li>
+		<li><kbd>==marked text==</kbd> &rarr; <mark>marked text</mark></li>
+		<li><kbd>[Front page]({{url_for('main.home')}})</kbd> &rarr; <a href="{{url_for('main.home')}}">Front page</a></li>
+		<li><kbd>[Spoilers](# "The spider-girl kills everyone")</kbd> &rarr; <a href="#" title="The spider-girl kills everyone">Spoilers</a></li>
+		<li><kbd># Header 1</kbd> &rarr; <h1 style="display: inline-block;">Header 1</h1></li>
+		<li><kbd>## Header 2</kbd> &rarr; <h2 style="display: inline-block;">Header 2</h2></li>
+		<li><kbd>### Header 3</kbd> &rarr; <h3 style="display: inline-block;">Header 3</h3></li>
+		<li><kbd>#### Header 4</kbd> &rarr; <h4 style="display: inline-block;">Header 4</h4></li>
+	</ul>
+</div>
 
 {{ linkable_header("Changing Your User's Avatar", "avatar") }}
 <div>

nyaa/templates/layout.html

@@ -44,6 +44,9 @@
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.3.1/markdown-it.min.js" integrity="sha256-3WZyZQOe+ql3pLo90lrkRtALrlniGdnf//gRpW0UQks=" crossorigin="anonymous"></script>
+		<!-- markdown-it extensions (self-hosted because no cdnjs releases) -->
+		<script src="{{ static_cachebuster('js/lib/markdown-it-ins.min.js') }}"></script>
+		<script src="{{ static_cachebuster('js/lib/markdown-it-mark.min.js') }}"></script>
 		<!-- Modified to not apply border-radius to selectpickers and stuff so our navbar looks cool -->
 		{% assets "bs_js" %}
 		<script src="{{ static_cachebuster('js/bootstrap-select.min.js') }}"></script>