ialbert
/
www-lib-markdown
Vērot 1
Pievienot zvaigznīti 0
Atdalīts 0
Kods Problēmas 12 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
PHP and Javascript implementations of a simple markdown parser
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
44 Revīzijas
1 Atzars
Koks: 7a8cdaaecc
Atzari Tagi
${ item.name }
Izveidot atzaru ${ searchTerm }
no '7a8cdaaecc'
${ noResults }
www-lib-markdown/markdownjs.html

markdownjs.html 12KB
Vēsture Neapstrādāts

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477 
  1. <!DOCTYPE html>

  2. <html>

  3. 	<head>

  4. 		<meta charset="utf-8">

  5. 		<title>Markdown Test</title>

  6. 		<link rel="icon" href="data:;base64,iVBORw0KGgo=">

  7. 		<style type="text/css">

  8. 			/* Structural style */

  9. 			:root {

  10. 				--color-editor-background: #00a;

  11. 				--color-editor-text: white;

  12. 				--toolbar-background: #ccc;

  13. 				--toolbar-text: #000;

  14. 			}

  15. 			@media (prefers-color-scheme: dark) {

  16. 				:root {

  17. 					--toolbar-background: #aaa;

  18. 				}

  19. 			}

  20. 			:root, body {

  21. 				width: 100%;

  22. 				height: 100%;

  23. 				padding: 0;

  24. 				margin: 0;

  25. 				background-color: var(--color-background);

  26. 				color: var(--color-text);

  27. 			}

  28. 			.inputhalf {

  29. 				position: absolute;

  30. 				width: 50%;

  31. 				height: 100%;

  32. 				left: 0;

  33. 				top: 0;

  34. 				background-color: var(--color-editor-background);

  35. 				color: var(--color-editor-text);

  36. 			}

  37. 			.previewhalf {

  38. 				position: absolute;

  39. 				width: 50%;

  40. 				height: 100%;

  41. 				left: 50%;

  42. 				top: 0;

  43. 				overflow-y: auto;

  44. 			}

  45. 			#preview {

  46. 				padding: 1em;

  47. 				margin: 0 auto;

  48. 				max-width: 600px;

  49. 			}

  50. 			.toolbar {

  51. 				position: absolute;

  52. 				z-index: 1;

  53. 				background-color: var(--toolbar-background);

  54. 				color: var(--toolbar-text);

  55. 				min-height: 32px;

  56. 				/* max-height: 300px; */

  57. 				width: 100%;

  58. 				border-bottom: 1px solid black;

  59. 				box-sizing: border-box;

  60. 				padding: 4px 20px;

  61. 				font-family: sans-serif;

  62. 			}

  63. 			#readercontainer {

  64. 				overflow-y: scroll;

  65. 			}

  66. 			.reader-header {

  67. 				margin-top: 0.25em;

  68. 				font-weight: bold;

  69. 			}

  70. 			.reader-check {

  71. 				display: inline-block;

  72. 				padding: 4px 8px;

  73. 				border: 1px dotted gray;

  74. 				margin: 4px;

  75. 			}

  76. 			#markdowninput {

  77. 				position: absolute;

  78. 				box-sizing: border-box;

  79. 				top: 32px;

  80. 				width: 100%;

  81. 				height: calc(100% - 32px);

  82. 				margin: 0;

  83. 				padding: 1em 2em;

  84. 				border: 0;

  85. 				background-color: var(--color-editor-background);

  86. 				color: var(--color-editor-text);

  87. 			}

  88. 			.calculated {

  89. 				background-color: var(--color-calculated-background);

  90. 				font-style: italic;

  91. 			}

  92. 			.spreadsheet-type-number,

  93. 			.spreadsheet-type-currency,

  94. 			.spreadsheet-type-percent {

  95. 				text-align: right;

  96. 			}

  97. 		</style>

  98. 		<style type="text/css">

  99. 			/* Document styling */

  100. 			/* From https://github.com/edwardtufte/tufte-css/blob/gh-pages/tufte.css */

  101. 			:root {

  102. 				--color-background: #fffff8;

  103. 				--color-text: #111;

  104. 				--color-table-header: #ddd;

  105. 				--color-table-border: black;

  106. 				--color-calculated-background: #eee;

  107. 				--color-highlight: #ff0;

  108. 				--color-highlight-text: #111;

  109. 			}

  110. 			@media (prefers-color-scheme: dark) {

  111. 				:root {

  112. 					--color-background: #151515;

  113. 					--color-text: #ddd;

  114. 					--color-table-header: #333;

  115. 					--color-table-border: #ccc;

  116. 					--color-calculated-background: #444;

  117. 					--color-highlight: #88f;

  118. 					--color-highlight-text: #ddd;

  119. 				}

  120. 			}

  121. 			html {

  122. 				font-size: 15px;

  123. 			}

  124. 

  125. 			body {

  126. 				/* width: 87.5%;

  127. 				margin-left: auto;

  128. 				margin-right: auto;

  129. 				padding-left: 12.5%; */

  130. 				font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

  131. 				background-color: var(--color-background);

  132. 				color: var(--color-text);

  133. 				/* max-width: 1400px; */

  134. 				counter-reset: sidenote-counter;

  135. 			}

  136. 

  137. 			h1 {

  138. 				font-weight: 400;

  139. 				margin-top: 4rem;

  140. 				margin-bottom: 1.5rem;

  141. 				font-size: 3.2rem;

  142. 				line-height: 1;

  143. 			}

  144. 			h2 {

  145. 				font-style: italic;

  146. 				font-weight: 400;

  147. 				margin-top: 2.1rem;

  148. 				margin-bottom: 1.4rem;

  149. 				font-size: 2.2rem;

  150. 				line-height: 1;

  151. 			}

  152. 			h3 {

  153. 				font-style: italic;

  154. 				font-weight: 400;

  155. 				font-size: 1.7rem;

  156. 				margin-top: 2rem;

  157. 				margin-bottom: 1.4rem;

  158. 				line-height: 1;

  159. 			}

  160. 			.subtext {

  161. 				font-size: 1rem;

  162. 				color: #888;

  163. 				margin-top: 0.25em;

  164. 				margin-bottom: 0.5em;

  165. 			}

  166. 			mark {

  167. 				background-color: var(--color-highlight);

  168. 				color: var(--color-highlight-text);

  169. 			}

  170. 			table {

  171. 				margin-top: 1em;

  172. 				margin-bottom: 1em;

  173. 				border-collapse: collapse;

  174. 			}

  175. 			td, th {

  176. 				padding: 0.4em 0.8em;

  177. 				font-size: 1rem;

  178. 			}

  179. 			th {

  180. 				background-color: var(--color-table-header);

  181. 				border-bottom: 2px solid var(--color-text);

  182. 			}

  183. 			tr:not(:last-child) td {

  184. 				border-bottom: 1px solid var(--color-text);

  185. 			}

  186. 			tr td:not(:last-child) {

  187. 				border-right: 1px solid var(--color-table-header);

  188. 			}

  189. 			hr {

  190. 				display: block;

  191. 				height: 1px;

  192. 				width: 55%;

  193. 				border: 0;

  194. 				border-top: 1px solid #ccc;

  195. 				margin: 1em 0;

  196. 				padding: 0;

  197. 			}

  198. 			article {

  199. 				padding: 5rem 0rem;

  200. 			}

  201. 			section {

  202. 				padding-top: 1rem;

  203. 				padding-bottom: 1rem;

  204. 			}

  205. 			p,

  206. 			ol,

  207. 			ul {

  208. 				font-size: 1.4rem;

  209. 				line-height: 2rem;

  210. 			}

  211. 			p.subtitle {

  212. 				font-style: italic;

  213. 				margin-top: 1rem;

  214. 				margin-bottom: 1rem;

  215. 				font-size: 1.8rem;

  216. 				display: block;

  217. 				line-height: 1;

  218. 			}

  219. 			code, pre > code {

  220. 				font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;

  221. 				font-size: 1.0rem;

  222. 				line-height: 1.42;

  223. 				-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */

  224. 			}

  225. 			pre > code {

  226. 				font-size: 0.9rem;

  227. 				width: 52.5%;

  228. 				margin-left: 2.5%;

  229. 				overflow-x: auto;

  230. 				display: block;

  231. 			}

  232. 			a:link,

  233. 			a:visited {

  234. 				color: inherit;

  235. 				text-underline-offset: 0.1em;

  236. 				text-decoration-thickness: 0.05em;

  237. 			}

  238. 			dt:not(:first-child),

  239. 			li:not(:first-child) {

  240. 				margin-top: 0.25rem;

  241. 			}

  242. 			dt, dd {

  243. 				font-size: 1.2rem;

  244. 			}

  245. 			dt {

  246. 				font-weight: bold;

  247. 			}

  248. 			.footnotes, .footnotes li {

  249. 				font-size: 80%;

  250. 			}

  251. 			.footnotes li:target, sup:target a {

  252. 				background-color: var(--color-highlight);

  253. 				color: var(--color-highlight-text);

  254. 			}

  255. 

  256. 		</style>

  257. 		<script src="js/markdown.js"></script>

  258. 		<script src="js/spreadsheet.js"></script>

  259. 		<script>

  260. 			var blockReaderClasses = {

  261. 				'Heading (underline)': MDUnderlinedHeadingReader,

  262. 				'Heading (hash)': MDHashHeadingReader,

  263. 				'Subtext': MDSubtextReader,

  264. 				'Block quote': MDBlockQuoteReader,

  265. 				'Unordered list': MDUnorderedListReader,

  266. 				'Ordered list': MDOrderedListReader,

  267. 				'Code block (fenced)': MDFencedCodeBlockReader,

  268. 				'Code block (indented)': MDIndentedCodeBlockReader,

  269. 				'Horizontal rule': MDHorizontalRuleReader,

  270. 				'Table': MDTableReader,

  271. 				'Definition list': MDDefinitionListReader,

  272. 				'Paragraph': MDParagraphReader,

  273. 				'Spreadsheets': MDSpreadsheetReader,

  274. 			};

  275. 			var inlineReaderClasses = {

  276. 				'Emphasis': MDEmphasisReader,

  277. 				'Strong': MDStrongReader,

  278. 				'Strikethrough': MDStrikethroughReader,

  279. 				'Underline': MDUnderlineReader,

  280. 				'Highlight': MDHighlightReader,

  281. 				'Links': MDLinkReader,

  282. 				'Referenced links': MDReferencedLinkReader,

  283. 				'Images': MDImageReader,

  284. 				'Referenced images': MDReferencedImageReader,

  285. 				'Code span': MDCodeSpanReader,

  286. 				'Subscript': MDSubscriptReader,

  287. 				'Superscript': MDSuperscriptReader,

  288. 				'Footnotes': MDFootnoteReader,

  289. 				'Abbrevations': MDAbbreviationReader,

  290. 				'HTML tags': MDHTMLTagReader,

  291. 				'Modifiers': MDModifierReader,

  292. 				'Line breaks': MDLineBreakReader,

  293. 			};

  294. 			var activeReaders = [];

  295. 			var parser = null;

  296. 			function onDocumentLoad() {

  297. 				activeReaders = [ ...Markdown.allReaders, new MDSpreadsheetReader() ];

  298. 				parser = new Markdown(activeReaders);

  299. 				document.getElementById('markdowninput').addEventListener('input', onMarkdownChange);

  300. 				populateReaderCheckboxes();

  301. 				setTimeout(onMarkdownChange, 0);

  302. 			}

  303. 			function onMarkdownChange() {

  304. 				const textarea = document.getElementById('markdowninput');

  305. 				let markdown = textarea.value;

  306. 				let html = parser.toHTML(markdown, 'foo-');

  307. 				document.getElementById('preview').innerHTML = html;

  308. 			}

  309. 			function populateReaderCheckboxes() {

  310. 				const container = document.getElementById('readercontainer');

  311. 				var header = document.createElement('div');

  312. 				header.classList.add('reader-header');

  313. 				header.append(document.createTextNode('Block Readers'));

  314. 				container.append(header);

  315. 				const blockContainer = document.createElement('div');

  316. 				container.append(blockContainer);

  317. 				for (const name of Object.keys(blockReaderClasses).sort()) {

  318. 					const readerClass = blockReaderClasses[name];

  319. 					const checkbox = makeReaderCheckbox(name, readerClass);

  320. 					blockContainer.append(checkbox);

  321. 				}

  322. 				header = document.createElement('div');

  323. 				header.classList.add('reader-header');

  324. 				header.append(document.createTextNode('Inline Readers'));

  325. 				container.append(header);

  326. 				const inlineContainer = document.createElement('div');

  327. 				container.append(inlineContainer);

  328. 				for (const name of Object.keys(inlineReaderClasses).sort()) {

  329. 					const readerClass = inlineReaderClasses[name];

  330. 					const checkbox = makeReaderCheckbox(name, readerClass);

  331. 					inlineContainer.append(checkbox);

  332. 				}

  333. 			}

  334. 			function makeReaderCheckbox(name, readerClass) {

  335. 				var isSelected = false;

  336. 				for (const elem of activeReaders) {

  337. 					if (elem.constructor === readerClass) {

  338. 						isSelected = true;

  339. 						break;

  340. 					}

  341. 				}

  342. 				const check = document.createElement('input');

  343. 				check.type = 'checkbox';

  344. 				check.checked = isSelected;

  345. 				check.addEventListener('change', () => {

  346. 					handleCheckChanged(readerClass, check);

  347. 				});

  348. 				check.id = `reader-${readerClass.name}`;

  349. 				const label = document.createElement('label');

  350. 				label.htmlFor = check.id;

  351. 				label.append(document.createTextNode(name));

  352. 				const div = document.createElement('div');

  353. 				div.classList.add('reader-check');

  354. 				div.append(check);

  355. 				div.append(label);

  356. 				return div;

  357. 			}

  358. 			function handleCheckChanged(readerClass, check) {

  359. 				console.info(`${readerClass.name}: ${check.checked}`);

  360. 				if (check.checked) {

  361. 					activeReaders.push(new readerClass());

  362. 				} else {

  363. 					activeReaders = activeReaders.filter((reader) => reader.constructor.name !== readerClass.name);

  364. 				}

  365. 				parser = new Markdown(activeReaders);

  366. 				onMarkdownChange();

  367. 			}

  368. 

  369. 			document.addEventListener('DOMContentLoaded', onDocumentLoad);

  370. 		</script>

  371. 	</head>

  372. 

  373. 	<body>

  374. 		<div class="inputhalf half">

  375. 			<div class="toolbar">

  376. 				<details>

  377. 					<summary>Readers</summary>

  378. 

  379. 					<div id="readercontainer"></div>

  380. 				</details>

  381. 			</div>

  382. 			<textarea id="markdowninput">## Block Formats {#top}

  383. 

  384. A regular paragraph.

  385. 

  386. -# Sub text

  387. 

  388. * Unordered

  389. * Lists

  390.     * Sub list

  391. 

  392. 1. Ordered

  393. 2. Lists

  394.     6. Sub list

  395. 

  396. A blockquote:

  397. 

  398. &gt; "The only thing we have to fear is fear itself—nameless, unreasoning,

  399. &gt; unjustified terror which paralyzes needed efforts to convert retreat into

  400. &gt; advance." - Franklin D. Roosevelt's First Inaugural Address

  401. 

  402. Some definitions:

  403. 

  404. word

  405. : a unit of meaning in a sentence

  406. sentence

  407. : a collection of words

  408. 

  409. Code:

  410. 

  411. ```javascript

  412. function foo() {

  413.     return 'Hello world';

  414. }

  415. ```

  416. 

  417.     function bar() {

  418.         return 'Indented code';

  419.     }

  420. 

  421. ### Heading, hash style

  422. 

  423. Heading, underline style

  424. ---

  425. 

  426. ### Modified Heading {style=color:red;}

  427. 

  428. | Unit Price | Qty | Subtotal |

  429. | ---: | ---: | ---: |

  430. | $1.23 | 2 | =A*B FILL |

  431. | $4.99 | 6 | |

  432. | Total | | =SUM(C:C) |

  433. 

  434. ---

  435. 

  436. ## Inline Formats

  437. 

  438. Normal, **double asterisk,** __double underscore,__ *asterisks,* _underscores,_

  439. ~~double tildes,~~ ~single tildes,~ ^carets,^ ==double equals==, ``double backticks``,

  440. `single backticks`.

  441. 

  442. Lorem ipsum dolor sit amet,[^1] consectetur adipiscing elit.[^abc] Sed sodales

  443. in odio eget porta. Proin et erat sit amet erat semper mollis vitae ut

  444. turpis.[^foo] Ut ipsum dui, maximus sit amet suscipit at, dictum id nulla.[^bar]

  445. Aenean efficitur rhoncus nulla non fermentum.

  446. 

  447. [^1]: Donec ut felis volutpat, gravida ipsum scelerisque, accumsan est.

  448. [^abc]: Cras dictum rutrum quam.

  449. [^foo]: Donec maximus bibendum lorem.

  450. [^bar]: Praesent consectetur tristique leo. Morbi nec nisi sit amet quam

  451.  imperdiet vehicula eu feugiat tortor. 

  452. 

  453. The HTML on the WWW is often full of JS and CSS.

  454. 

  455. *[HTML]: Hypertext Markup Language

  456. *[WWW]: World Wide Web

  457. *[JS]: JavaScript

  458. *[CSS]: Cascading Style Sheets

  459. 

  460. Click [here](#top) to return to the top. Referenced link to [Google][google].

  461. 

  462. ![alt text](https://picsum.photos/100/75) ![alt text](https://picsum.photos/101/75 "With a title")

  463. ![][testimage]

  464. 

  465. [testimage]: https://picsum.photos/102/75

  466. [google]: https://google.com  "I prefer Duck Duck Go"

  467. 

  468. Some verbatim &lt;span style="color:green;"&gt;HTML&lt;/span&gt;. A script tag

  469. will be ignored. &lt;script&gt;&lt;/script&gt;</textarea>

  470. 		</div>

  471. 		<div class="previewhalf half">

  472. 			<div id="preview">

  473. 				<p>Preview here</p>

  474. 			</div>

  475. 		</div>

  476. 	</body>

  477. </html>