ialbert
/
www-lib-markdown
Observar 1
Favorito 0
Fork 0
Código Issues 12 Pull requests 0 Versões 0 Wiki Atividade
PHP and Javascript implementations of a simple markdown parser
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
35 Commits
1 Branch
Tag: 57fde9acc6
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de 57fde9acc6
${ noResults }
www-lib-markdown/markdownjs.html

markdownjs.html 11KB
Histórico Original

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415 
  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. 			:root {

  9. 				--color-background: #fffff8;

  10. 				--color-text: #111;

  11. 				--color-editor-background: #0000aa;

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

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

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

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

  16. 			}

  17. 			:root, body {

  18. 				width: 100%;

  19. 				height: 100%;

  20. 				padding: 0;

  21. 				margin: 0;

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

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

  24. 			}

  25. 			.inputhalf {

  26. 				position: absolute;

  27. 				width: 50%;

  28. 				height: 100%;

  29. 				left: 0;

  30. 				top: 0;

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

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

  33. 			}

  34. 			.previewhalf {

  35. 				position: absolute;

  36. 				width: 50%;

  37. 				height: 100%;

  38. 				left: 50%;

  39. 				top: 0;

  40. 				overflow-y: auto;

  41. 			}

  42. 			#preview {

  43. 				padding: 1em;

  44. 				margin: 0 auto;

  45. 				max-width: 600px;

  46. 			}

  47. 			.toolbar {

  48. 				position: absolute;

  49. 				z-index: 1;

  50. 				background-color: #eee;

  51. 				min-height: 32px;

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

  53. 				width: 100%;

  54. 				color: black;

  55. 				border-bottom: 1px solid black;

  56. 				box-sizing: border-box;

  57. 				padding: 4px 20px;

  58. 			}

  59. 			#readercontainer {

  60. 				overflow-y: scroll;

  61. 			}

  62. 			.reader-header {

  63. 				margin-top: 0.25em;

  64. 				font-weight: bold;

  65. 			}

  66. 			.reader-check {

  67. 				display: inline-block;

  68. 				padding: 4px 8px;

  69. 				border: 1px dotted gray;

  70. 				margin: 4px;

  71. 			}

  72. 			#markdowninput {

  73. 				position: absolute;

  74. 				top: 32px;

  75. 				margin-top: 32px;

  76. 				width: 100%;

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

  78. 				box-sizing: border-box;

  79. 				margin: 0;

  80. 				padding: 0.5em;

  81. 				border: 0;

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

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

  84. 				box-sizing: border-box;

  85. 			}

  86. 			.calculated {

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

  88. 				font-style: italic;

  89. 			}

  90. 			.spreadsheet-type-number,

  91. 			.spreadsheet-type-currency,

  92. 			.spreadsheet-type-percent {

  93. 				text-align: right;

  94. 			}

  95. 			table {

  96. 				border-collapse: collapse;

  97. 			}

  98. 			table th {

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

  100. 			}

  101. 			table td, table th {

  102. 				border: 1px solid var(--color-table-border);

  103. 				padding: 0.2em 0.5em;

  104. 			}

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

  106. 				:root {

  107. 					--color-background: #151515;

  108. 					--color-text: #ddd;

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

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

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

  112. 				}

  113. 			}

  114. 		</style>

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

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

  117. 			html {

  118. 				font-size: 15px;

  119. 			}

  120. 

  121. 			body {

  122. 				/* width: 87.5%;

  123. 				margin-left: auto;

  124. 				margin-right: auto;

  125. 				padding-left: 12.5%; */

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

  127. 				background-color: #fffff8;

  128. 				color: #111;

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

  130. 				counter-reset: sidenote-counter;

  131. 			}

  132. 

  133. 			/* Adds dark mode */

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

  135. 				body {

  136. 					background-color: #151515;

  137. 					color: #ddd;

  138. 				}

  139. 			}

  140. 			h1 {

  141. 				font-weight: 400;

  142. 				margin-top: 4rem;

  143. 				margin-bottom: 1.5rem;

  144. 				font-size: 3.2rem;

  145. 				line-height: 1;

  146. 			}

  147. 			h2 {

  148. 				font-style: italic;

  149. 				font-weight: 400;

  150. 				margin-top: 2.1rem;

  151. 				margin-bottom: 1.4rem;

  152. 				font-size: 2.2rem;

  153. 				line-height: 1;

  154. 			}

  155. 			h3 {

  156. 				font-style: italic;

  157. 				font-weight: 400;

  158. 				font-size: 1.7rem;

  159. 				margin-top: 2rem;

  160. 				margin-bottom: 1.4rem;

  161. 				line-height: 1;

  162. 			}

  163. 			hr {

  164. 				display: block;

  165. 				height: 1px;

  166. 				width: 55%;

  167. 				border: 0;

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

  169. 				margin: 1em 0;

  170. 				padding: 0;

  171. 			}

  172. 			article {

  173. 				padding: 5rem 0rem;

  174. 			}

  175. 			section {

  176. 				padding-top: 1rem;

  177. 				padding-bottom: 1rem;

  178. 			}

  179. 			p,

  180. 			dl,

  181. 			ol,

  182. 			ul {

  183. 				font-size: 1.4rem;

  184. 				line-height: 2rem;

  185. 			}

  186. 			p.subtitle {

  187. 				font-style: italic;

  188. 				margin-top: 1rem;

  189. 				margin-bottom: 1rem;

  190. 				font-size: 1.8rem;

  191. 				display: block;

  192. 				line-height: 1;

  193. 			}

  194. 			code, pre > code {

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

  196. 				font-size: 1.0rem;

  197. 				line-height: 1.42;

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

  199. 			}

  200. 			pre > code {

  201. 				font-size: 0.9rem;

  202. 				width: 52.5%;

  203. 				margin-left: 2.5%;

  204. 				overflow-x: auto;

  205. 				display: block;

  206. 			}

  207. 			a:link,

  208. 			a:visited {

  209. 				color: inherit;

  210. 				text-underline-offset: 0.1em;

  211. 				text-decoration-thickness: 0.05em;

  212. 			}

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

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

  215. 				margin-top: 0.25rem;

  216. 			}

  217. 

  218. 		</style>

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

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

  221. 		<script>

  222. 			var parser = new Markdown([ ...Markdown.allReaders, new MDSpreadsheetReader() ]);

  223. 			function onDocumentLoad() {

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

  225. 				populateReaderCheckboxes();

  226. 				setTimeout(onMarkdownChange, 0);

  227. 			}

  228. 			function onMarkdownChange() {

  229. 				let markdown = document.getElementById('markdowninput').value;

  230. 				let html = parser.toHTML(markdown);

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

  232. 			}

  233. 			var blockReaderClasses = {

  234. 				'Heading (underline)': MDUnderlinedHeadingReader,

  235. 				'Heading (hash)': MDHashHeadingReader,

  236. 				'Subtext': MDSubtextReader,

  237. 				'Block quote': MDBlockQuoteReader,

  238. 				'Unordered list': MDUnorderedListReader,

  239. 				'Ordered list': MDOrderedListReader,

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

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

  242. 				'Horizontal rule': MDHorizontalRuleReader,

  243. 				'Table': MDTableReader,

  244. 				'Definition list': MDDefinitionListReader,

  245. 				'Paragraph': MDParagraphReader,

  246. 				'Spreadsheets': MDSpreadsheetReader,

  247. 			};

  248. 			var inlineReaderClasses = {

  249. 				'Emphasis': MDEmphasisReader,

  250. 				'Strong': MDStrongReader,

  251. 				'Strikethrough': MDStrikethroughReader,

  252. 				'Underline': MDUnderlineReader,

  253. 				'Highlight': MDHighlightReader,

  254. 				'Links': MDLinkReader,

  255. 				'Referenced links': MDReferencedLinkReader,

  256. 				'Images': MDImageReader,

  257. 				'Referenced images': MDReferencedImageReader,

  258. 				'Code span': MDCodeSpanReader,

  259. 				'Subscript': MDSubscriptReader,

  260. 				'Superscript': MDSuperscriptReader,

  261. 				'Footnotes': MDFootnoteReader,

  262. 				'Abbrevations': MDAbbreviationReader,

  263. 				'HTML tags': MDHTMLTagReader,

  264. 				'Modifiers': MDModifierReader,

  265. 			};

  266. 			var activeReaders = [];

  267. 			function populateReaderCheckboxes() {

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

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

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

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

  272. 				container.append(header);

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

  274. 				container.append(blockContainer);

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

  276. 					const readerClass = blockReaderClasses[name];

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

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

  279. 					blockContainer.append(checkbox);

  280. 				}

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

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

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

  284. 				container.append(header);

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

  286. 				container.append(inlineContainer);

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

  288. 					const readerClass = inlineReaderClasses[name];

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

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

  291. 					inlineContainer.append(checkbox);

  292. 				}

  293. 			}

  294. 			function makeReaderCheckbox(name, readerClass) {

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

  296. 				check.type = 'checkbox';

  297. 				check.checked = true;

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

  299. 					handleCheckChanged(readerClass, check);

  300. 				});

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

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

  303. 				label.htmlFor = check.id;

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

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

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

  307. 				div.append(check);

  308. 				div.append(label);

  309. 				return div;

  310. 			}

  311. 			function handleCheckChanged(readerClass, check) {

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

  313. 				if (check.checked) {

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

  315. 				} else {

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

  317. 				}

  318. 				parser = new Markdown(activeReaders);

  319. 				onMarkdownChange();

  320. 			}

  321. 

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

  323. 		</script>

  324. 	</head>

  325. 

  326. 	<body>

  327. 		<div class="inputhalf half">

  328. 			<div class="toolbar">

  329. 				<details>

  330. 					<summary>Readers</summary>

  331. 

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

  333. 				</details>

  334. 			</div>

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

  336. 

  337. 				* Unordered

  338. 				* Lists

  339. 				  * Sub list

  340. 				

  341. 				1. Ordered

  342. 				2. Lists

  343. 				  6. Sub list

  344. 				

  345. 				&gt; A block quote lorem ipsum dolor sit amet

  346. 				

  347. 				A regular paragraph

  348. 				

  349. 				word

  350. 				: a unit of meaning in a sentence

  351. 				sentence

  352. 				: a collection of words

  353. 				

  354. 				```javascript

  355. 				function foo() {

  356. 					return 'Fenced code block';

  357. 				}

  358. 				```

  359. 				

  360. 					function bar() {

  361. 						return 'Indented code';

  362. 					}

  363. 				

  364. 				### Heading, hash style

  365. 				

  366. 				Heading, underline style

  367. 				---

  368. 				

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

  370. 				

  371. 				-# Sub text

  372. 				

  373. 				| Unit Price | Qty | Subtotal |

  374. 				| ---: | ---: | ---: |

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

  376. 				| $4.99 | 6 | |

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

  378. 				

  379. 				---

  380. 				

  381. 				## Inline Formats

  382. 				

  383. 				Normal, **double asterisk,** __double underscore,__ *asterisks,* _underscores,_ ~~double tildes,~~ ~single tildes,~ ^carets,^ ==double equals==, ``double backticks``, `single backticks`.

  384. 				

  385. 				Lorem ipsum dolor sit amet,[^1] consectetur adipiscing elit.[^abc] Sed sodales in odio eget porta. Proin et erat sit amet erat semper mollis vitae ut turpis.[^foo] Ut ipsum dui, maximus sit amet suscipit at, dictum id nulla.[^bar] Aenean efficitur rhoncus nulla non fermentum.

  386. 				

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

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

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

  390. 				[^bar]: Praesent consectetur tristique leo. Morbi nec nisi sit amet quam imperdiet vehicula eu feugiat tortor. 

  391. 				

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

  393. 				

  394. 				*[HTML]: Hypertext Markup Language

  395. 				*[WWW]: World Wide Web

  396. 				*[JS]: JavaScript

  397. 				*[CSS]: Cascading Style Sheets

  398. 				

  399. 				Click [here](#top) to return to the top. Referenced link to [Google][google title="I prefer Duck Duck Go"].

  400. 				

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

  402. 				

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

  404. 				[google]: https://google.com

  405. 				

  406. 				Some verbatim &lt;span style="color:green;"&gt;HTML&lt;/span&gt;. A script tag will be ignored. &lt;script&gt;&lt;/script&gt;

  407. 			</textarea>

  408. 		</div>

  409. 		<div class="previewhalf half">

  410. 			<div id="preview">

  411. 				<p>Preview here</p>

  412. 			</div>

  413. 		</div>

  414. 	</body>

  415. </html>