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ů.
41 Revize
1 Větev
Strom: 2f8bc87783
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „2f8bc87783“
${ noResults }
www-lib-markdown/markdownjs.html

markdownjs.html 12KB
Historie Surový

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459 
  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 parser = new Markdown([ ...Markdown.allReaders, new MDSpreadsheetReader() ]);

  261. 			function onDocumentLoad() {

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

  263. 				populateReaderCheckboxes();

  264. 				setTimeout(onMarkdownChange, 0);

  265. 			}

  266. 			function onMarkdownChange() {

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

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

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

  270. 			}

  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. 			};

  304. 			var activeReaders = [];

  305. 			function populateReaderCheckboxes() {

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

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

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

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

  310. 				container.append(header);

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

  312. 				container.append(blockContainer);

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

  314. 					const readerClass = blockReaderClasses[name];

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

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

  317. 					blockContainer.append(checkbox);

  318. 				}

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

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

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

  322. 				container.append(header);

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

  324. 				container.append(inlineContainer);

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

  326. 					const readerClass = inlineReaderClasses[name];

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

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

  329. 					inlineContainer.append(checkbox);

  330. 				}

  331. 			}

  332. 			function makeReaderCheckbox(name, readerClass) {

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

  334. 				check.type = 'checkbox';

  335. 				check.checked = true;

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

  337. 					handleCheckChanged(readerClass, check);

  338. 				});

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

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

  341. 				label.htmlFor = check.id;

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

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

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

  345. 				div.append(check);

  346. 				div.append(label);

  347. 				return div;

  348. 			}

  349. 			function handleCheckChanged(readerClass, check) {

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

  351. 				if (check.checked) {

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

  353. 				} else {

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

  355. 				}

  356. 				parser = new Markdown(activeReaders);

  357. 				onMarkdownChange();

  358. 			}

  359. 

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

  361. 		</script>

  362. 	</head>

  363. 

  364. 	<body>

  365. 		<div class="inputhalf half">

  366. 			<div class="toolbar">

  367. 				<details>

  368. 					<summary>Readers</summary>

  369. 

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

  371. 				</details>

  372. 			</div>

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

  374. 

  375. A regular paragraph.

  376. 

  377. -# Sub text

  378. 

  379. * Unordered

  380. * Lists

  381.     * Sub list

  382. 

  383. 1. Ordered

  384. 2. Lists

  385.     6. Sub list

  386. 

  387. A blockquote:

  388. 

  389. &gt; "The only thing we have to fear is fear itself—nameless, unreasoning, unjustified terror which paralyzes needed efforts to convert retreat into advance." - Franklin D. Roosevelt's First Inaugural Address

  390. 

  391. Some definitions:

  392. 

  393. word

  394. : a unit of meaning in a sentence

  395. sentence

  396. : a collection of words

  397. 

  398. Code:

  399. 

  400. ```javascript

  401. function foo() {

  402.     return 'Hello world';

  403. }

  404. ```

  405. 

  406.     function bar() {

  407.         return 'Indented code';

  408.     }

  409. 

  410. ### Heading, hash style

  411. 

  412. Heading, underline style

  413. ---

  414. 

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

  416. 

  417. | Unit Price | Qty | Subtotal |

  418. | ---: | ---: | ---: |

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

  420. | $4.99 | 6 | |

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

  422. 

  423. ---

  424. 

  425. ## Inline Formats

  426. 

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

  428. 

  429. 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.

  430. 

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

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

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

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

  435. 

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

  437. 

  438. *[HTML]: Hypertext Markup Language

  439. *[WWW]: World Wide Web

  440. *[JS]: JavaScript

  441. *[CSS]: Cascading Style Sheets

  442. 

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

  444. 

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

  446. 

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

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

  449. 

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

  451. 			</textarea>

  452. 		</div>

  453. 		<div class="previewhalf half">

  454. 			<div id="preview">

  455. 				<p>Preview here</p>

  456. 			</div>

  457. 		</div>

  458. 	</body>

  459. </html>