ialbert
/
www-lib-markdown
Sledovat 1
Oblíbit 0
Rozštěpit 0
Zdrojový kód Úkoly 12 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
PHP and Javascript implementations of a simple markdown parser
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
52 Revize
1 Větev
Strom: 468486c426
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „468486c426“
${ noResults }
www-lib-markdown/playground.html

playground.html 15KB
Historie Surový

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556 
  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. 			.codeswitch-cont {

  64. 				position: absolute;

  65. 				top: 0;

  66. 				right: 0;

  67. 				height: 31px;

  68. 				z-index: 2;

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

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

  71. 				padding: 3px 10px;

  72. 				box-sizing: border-box;

  73. 			}

  74. 			#readercontainer {

  75. 				overflow-y: scroll;

  76. 			}

  77. 			.reader-header {

  78. 				margin-top: 0.25em;

  79. 				font-weight: bold;

  80. 			}

  81. 			.reader-check {

  82. 				display: inline-block;

  83. 				padding: 4px 8px;

  84. 				border: 1px dotted gray;

  85. 				margin: 4px;

  86. 			}

  87. 			#markdowninput {

  88. 				position: absolute;

  89. 				box-sizing: border-box;

  90. 				top: 32px;

  91. 				width: 100%;

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

  93. 				margin: 0;

  94. 				padding: 1em 2em;

  95. 				border: 0;

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

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

  98. 			}

  99. 			.calculated {

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

  101. 				font-style: italic;

  102. 			}

  103. 			.spreadsheet-type-number,

  104. 			.spreadsheet-type-currency,

  105. 			.spreadsheet-type-percent {

  106. 				text-align: right;

  107. 			}

  108. 		</style>

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

  110. 			/* Document styling */

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

  112. 			:root {

  113. 				--color-background: #fffff8;

  114. 				--color-text: #111;

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

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

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

  118. 				--color-highlight: #ff0;

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

  120. 			}

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

  122. 				:root {

  123. 					--color-background: #151515;

  124. 					--color-text: #ddd;

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

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

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

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

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

  130. 				}

  131. 			}

  132. 			html {

  133. 				font-size: 15px;

  134. 			}

  135. 

  136. 			body {

  137. 				/* width: 87.5%;

  138. 				margin-left: auto;

  139. 				margin-right: auto;

  140. 				padding-left: 12.5%; */

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

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

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

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

  145. 				counter-reset: sidenote-counter;

  146. 			}

  147. 

  148. 			h1 {

  149. 				font-weight: 400;

  150. 				margin-top: 4rem;

  151. 				margin-bottom: 1.5rem;

  152. 				font-size: 3.2rem;

  153. 				line-height: 1;

  154. 			}

  155. 			h2 {

  156. 				font-style: italic;

  157. 				font-weight: 400;

  158. 				margin-top: 2.1rem;

  159. 				margin-bottom: 1.4rem;

  160. 				font-size: 2.2rem;

  161. 				line-height: 1;

  162. 			}

  163. 			h3 {

  164. 				font-style: italic;

  165. 				font-weight: 400;

  166. 				font-size: 1.7rem;

  167. 				margin-top: 2rem;

  168. 				margin-bottom: 1.4rem;

  169. 				line-height: 1;

  170. 			}

  171. 			.subtext {

  172. 				font-size: 1rem;

  173. 				color: #888;

  174. 				margin-top: 0.25em;

  175. 				margin-bottom: 0.5em;

  176. 			}

  177. 			mark {

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

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

  180. 			}

  181. 			table {

  182. 				margin-top: 1em;

  183. 				margin-bottom: 1em;

  184. 				border-collapse: collapse;

  185. 			}

  186. 			td, th {

  187. 				padding: 0.4em 0.8em;

  188. 				font-size: 1rem;

  189. 			}

  190. 			th {

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

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

  193. 			}

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

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

  196. 			}

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

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

  199. 			}

  200. 			hr {

  201. 				display: block;

  202. 				height: 1px;

  203. 				width: 55%;

  204. 				border: 0;

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

  206. 				margin: 1em 0;

  207. 				padding: 0;

  208. 			}

  209. 			article {

  210. 				padding: 5rem 0rem;

  211. 			}

  212. 			section {

  213. 				padding-top: 1rem;

  214. 				padding-bottom: 1rem;

  215. 			}

  216. 			p,

  217. 			ol,

  218. 			ul {

  219. 				font-size: 1.4rem;

  220. 				line-height: 2rem;

  221. 			}

  222. 			p.subtitle {

  223. 				font-style: italic;

  224. 				margin-top: 1rem;

  225. 				margin-bottom: 1rem;

  226. 				font-size: 1.8rem;

  227. 				display: block;

  228. 				line-height: 1;

  229. 			}

  230. 			code, pre > code {

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

  232. 				font-size: 1.0rem;

  233. 				line-height: 1.42;

  234. 				-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 */

  235. 			}

  236. 			pre > code {

  237. 				font-size: 0.9rem;

  238. 				width: 52.5%;

  239. 				margin-left: 2.5%;

  240. 				overflow-x: auto;

  241. 				display: block;

  242. 			}

  243. 			a:link,

  244. 			a:visited {

  245. 				color: inherit;

  246. 				text-underline-offset: 0.1em;

  247. 				text-decoration-thickness: 0.05em;

  248. 			}

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

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

  251. 				margin-top: 0.25rem;

  252. 			}

  253. 			dt, dd {

  254. 				font-size: 1.2rem;

  255. 			}

  256. 			dt {

  257. 				font-weight: bold;

  258. 			}

  259. 			.footnotes, .footnotes li {

  260. 				font-size: 80%;

  261. 			}

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

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

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

  265. 			}

  266. 

  267. 		</style>

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

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

  270. 		<script>

  271. 			var blockReaderClasses = {

  272. 				'Heading (underline)': MDUnderlinedHeadingReader,

  273. 				'Heading (hash)': MDHashHeadingReader,

  274. 				'Subtext': MDSubtextReader,

  275. 				'Block quote': MDBlockQuoteReader,

  276. 				'Unordered list': MDUnorderedListReader,

  277. 				'Ordered list': MDOrderedListReader,

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

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

  280. 				'Horizontal rule': MDHorizontalRuleReader,

  281. 				'Table': MDTableReader,

  282. 				'Definition list': MDDefinitionListReader,

  283. 				'Paragraph': MDParagraphReader,

  284. 				'Spreadsheets': MDSpreadsheetReader,

  285. 			};

  286. 			var inlineReaderClasses = {

  287. 				'Emphasis': MDEmphasisReader,

  288. 				'Strong': MDStrongReader,

  289. 				'Strikethrough': MDStrikethroughReader,

  290. 				'Underline': MDUnderlineReader,

  291. 				'Highlight': MDHighlightReader,

  292. 				'Links': MDLinkReader,

  293. 				'Referenced links': MDReferencedLinkReader,

  294. 				'Images': MDImageReader,

  295. 				'Referenced images': MDReferencedImageReader,

  296. 				'Code span': MDCodeSpanReader,

  297. 				'Subscript': MDSubscriptReader,

  298. 				'Superscript': MDSuperscriptReader,

  299. 				'Footnotes': MDFootnoteReader,

  300. 				'Abbrevations': MDAbbreviationReader,

  301. 				'HTML tags': MDHTMLTagReader,

  302. 				'Modifiers': MDModifierReader,

  303. 				'Line breaks': MDLineBreakReader,

  304. 			};

  305. 			var activeReaders = [];

  306. 			var parser = null;

  307. 			function onDocumentLoad() {

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

  309. 				parser = new Markdown(activeReaders);

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

  311. 				populateReaderCheckboxes();

  312. 				document.getElementById('sendbutton').addEventListener('click', () => {

  313. 					handleSendClicked();

  314. 				});

  315. 				document.getElementById('code-js').addEventListener('change', onMarkdownChange);

  316. 				document.getElementById('code-php').addEventListener('change', onMarkdownChange);

  317. 				setTimeout(onMarkdownChange, 0);

  318. 			}

  319. 			function onMarkdownChange() {

  320. 				if (document.getElementById('code-php').checked) {

  321. 					debouncedSendPreviewRequest();

  322. 				} else if (document.getElementById('code-js').checked) {

  323. 					updatePreviewLocally();

  324. 				}

  325. 			}

  326. 			function updatePreviewLocally() {

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

  328. 				let markdown = textarea.value;

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

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

  331. 			}

  332. 			var debounceTimer = null;

  333. 			var needsUpdate = false;

  334. 			function debouncedSendPreviewRequest() {

  335. 				if (debounceTimer) {

  336. 					needsUpdate = true;

  337. 				} else {

  338. 					debounceTimer = setInterval(() => {

  339. 						if (needsUpdate) {

  340. 							needsUpdate = false;

  341. 							sendPreviewRequest();

  342. 						} else {

  343. 							clearTimeout(debounceTimer);

  344. 							debounceTimer = null;

  345. 						}

  346. 					}, 500);

  347. 					sendPreviewRequest();

  348. 				}

  349. 			}

  350. 			function sendPreviewRequest() {

  351. 				const markdown = document.getElementById('markdowninput').value;

  352. 				const readers = activeReaders.map((r) => r.constructor.name);

  353. 				const request = new XMLHttpRequest();

  354. 				var formData = encodeForm({

  355. 					'markdown': markdown,

  356. 					'readers': readers,

  357. 				});

  358. 				request.open('POST', 'playgroundapi.php', true);

  359. 				request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  360. 				request.onreadystatechange = () => {

  361. 					if (request.readyState == 4 && request.status == 200) {

  362. 						document.getElementById('preview').innerHTML = request.responseText;

  363. 					}

  364. 				};

  365. 				request.send(formData);

  366. 			}

  367. 			function encodeForm(values) {

  368. 				var pairs = [];

  369. 				for (const [key, value] of Object.entries(values)) {

  370. 					if (value instanceof Array) {

  371. 						for (const v of value) {

  372. 							pairs.push(`${encodeURIComponent(key + '[]')}=${encodeURIComponent(v)}`);

  373. 						}

  374. 					} else {

  375. 						pairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);

  376. 					}

  377. 				}

  378. 				return pairs.join('&');

  379. 			}

  380. 			function populateReaderCheckboxes() {

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

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

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

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

  385. 				container.append(header);

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

  387. 				container.append(blockContainer);

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

  389. 					const readerClass = blockReaderClasses[name];

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

  391. 					blockContainer.append(checkbox);

  392. 				}

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

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

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

  396. 				container.append(header);

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

  398. 				container.append(inlineContainer);

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

  400. 					const readerClass = inlineReaderClasses[name];

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

  402. 					inlineContainer.append(checkbox);

  403. 				}

  404. 			}

  405. 			function makeReaderCheckbox(name, readerClass) {

  406. 				var isSelected = false;

  407. 				for (const elem of activeReaders) {

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

  409. 						isSelected = true;

  410. 						break;

  411. 					}

  412. 				}

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

  414. 				check.type = 'checkbox';

  415. 				check.checked = isSelected;

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

  417. 					handleCheckChanged(readerClass, check);

  418. 				});

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

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

  421. 				label.htmlFor = check.id;

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

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

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

  425. 				div.append(check);

  426. 				div.append(label);

  427. 				return div;

  428. 			}

  429. 			function handleCheckChanged(readerClass, check) {

  430. 				if (check.checked) {

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

  432. 				} else {

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

  434. 				}

  435. 				parser = new Markdown(activeReaders);

  436. 				onMarkdownChange();

  437. 			}

  438. 			function handleSendClicked() {

  439. 				sendPreviewRequest();

  440. 			}

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

  442. 		</script>

  443. 	</head>

  444. 

  445. 	<body>

  446. 		<div class="inputhalf half">

  447. 			<div class="toolbar">

  448. 				<details>

  449. 					<summary>Readers</summary>

  450. 

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

  452. 				</details>

  453. 			</div>

  454. 			<div class="codeswitch-cont">

  455. 				<input type="radio" id="code-js" name="code" value="js" checked>

  456. 				<label for="code-js">Javascript</label>

  457. 				<input type="radio" id="code-php" name="code" value="php">

  458. 				<label for="code-php">PHP</label>

  459. 			</div>

  460. 			<div id="sendbuttoncont"><button id="sendbutton">Send</button></div>

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

  462. 

  463. A regular paragraph.

  464. 

  465. -# Sub text

  466. 

  467. * Unordered

  468. * Lists

  469.     * Sub list

  470. 

  471. 1. Ordered

  472. 2. Lists

  473.     6. Sub list

  474. 

  475. A blockquote:

  476. 

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

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

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

  480. 

  481. Some definitions:

  482. 

  483. word

  484. : a unit of meaning in a sentence

  485. sentence

  486. : a collection of words

  487. 

  488. Code:

  489. 

  490. ```javascript

  491. function foo() {

  492.     return 'Hello world';

  493. }

  494. ```

  495. 

  496.     function bar() {

  497.         return 'Indented code';

  498.     }

  499. 

  500. ### Heading, hash style

  501. 

  502. Heading, underline style

  503. ---

  504. 

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

  506. 

  507. | Unit Price | Qty | Subtotal |

  508. | ---: | ---: | ---: |

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

  510. | $4.99 | 6 | |

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

  512. 

  513. ---

  514. 

  515. ## Inline Formats

  516. 

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

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

  519. `single backticks`.

  520. 

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

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

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

  524. Aenean efficitur rhoncus nulla non fermentum.

  525. 

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

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

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

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

  530.  imperdiet vehicula eu feugiat tortor. 

  531. 

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

  533. 

  534. *[HTML]: Hypertext Markup Language

  535. *[WWW]: World Wide Web

  536. *[JS]: JavaScript

  537. *[CSS]: Cascading Style Sheets

  538. 

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

  540. 

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

  542. ![][testimage]

  543. 

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

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

  546. 

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

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

  549. 		</div>

  550. 		<div class="previewhalf half">

  551. 			<div id="preview">

  552. 				<p>Preview here</p>

  553. 			</div>

  554. 		</div>

  555. 	</body>

  556. </html>