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

markdownjs.html 7.8KB
Historie Surový

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237 
  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. /* body {

  26.     width: 87.5%;

  27.     margin-left: auto;

  28.     margin-right: auto;

  29.     padding-left: 12.5%;

  30.     background-color: #fffff8;

  31.     color: #111;

  32.     max-width: 1400px;

  33.     counter-reset: sidenote-counter;

  34. } */

  35. 			.inputhalf {

  36. 				position: absolute;

  37. 				width: 50%;

  38. 				height: 100%;

  39. 				left: 0;

  40. 				top: 0;

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

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

  43. 			}

  44. 			.previewhalf {

  45. 				position: absolute;

  46. 				width: 50%;

  47. 				height: 100%;

  48. 				left: 50%;

  49. 				top: 0;

  50. 				overflow-y: auto;

  51. 			}

  52. 			#preview {

  53. 				padding: 1em;

  54. 				margin: 0 auto;

  55. 				max-width: 600px;

  56. 			}

  57. 			#markdowninput {

  58. 				width: 100%;

  59. 				height: 100%;

  60. 				box-sizing: border-box;

  61. 				margin: 0;

  62. 				padding: 0.5em;

  63. 				border: 0;

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

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

  66. 			}

  67. 			.calculated {

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

  69. 				font-style: italic;

  70. 			}

  71. 			.spreadsheet-type-number,

  72. 			.spreadsheet-type-currency,

  73. 			.spreadsheet-type-percent {

  74. 				text-align: right;

  75. 			}

  76. 			table {

  77. 				border-collapse: collapse;

  78. 			}

  79. 			table th {

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

  81. 			}

  82. 			table td, table th {

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

  84. 				padding: 0.2em 0.5em;

  85. 			}

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

  87. 				:root {

  88. 					--color-background: #151515;

  89. 					--color-text: #ddd;

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

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

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

  93. 				}

  94. 			}

  95. 		</style>

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

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

  98. 			html {

  99. 				font-size: 15px;

  100. 			}

  101. 

  102. 			body {

  103. 				/* width: 87.5%;

  104. 				margin-left: auto;

  105. 				margin-right: auto;

  106. 				padding-left: 12.5%; */

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

  108. 				background-color: #fffff8;

  109. 				color: #111;

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

  111. 				counter-reset: sidenote-counter;

  112. 			}

  113. 

  114. 			/* Adds dark mode */

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

  116. 				body {

  117. 					background-color: #151515;

  118. 					color: #ddd;

  119. 				}

  120. 			}

  121. 			h1 {

  122. 				font-weight: 400;

  123. 				margin-top: 4rem;

  124. 				margin-bottom: 1.5rem;

  125. 				font-size: 3.2rem;

  126. 				line-height: 1;

  127. 			}

  128. 			h2 {

  129. 				font-style: italic;

  130. 				font-weight: 400;

  131. 				margin-top: 2.1rem;

  132. 				margin-bottom: 1.4rem;

  133. 				font-size: 2.2rem;

  134. 				line-height: 1;

  135. 			}

  136. 			h3 {

  137. 				font-style: italic;

  138. 				font-weight: 400;

  139. 				font-size: 1.7rem;

  140. 				margin-top: 2rem;

  141. 				margin-bottom: 1.4rem;

  142. 				line-height: 1;

  143. 			}

  144. 			hr {

  145. 				display: block;

  146. 				height: 1px;

  147. 				width: 55%;

  148. 				border: 0;

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

  150. 				margin: 1em 0;

  151. 				padding: 0;

  152. 			}

  153. 			article {

  154. 				padding: 5rem 0rem;

  155. 			}

  156. 			section {

  157. 				padding-top: 1rem;

  158. 				padding-bottom: 1rem;

  159. 			}

  160. 			p,

  161. 			dl,

  162. 			ol,

  163. 			ul {

  164. 				font-size: 1.4rem;

  165. 				line-height: 2rem;

  166. 			}

  167. 			p.subtitle {

  168. 				font-style: italic;

  169. 				margin-top: 1rem;

  170. 				margin-bottom: 1rem;

  171. 				font-size: 1.8rem;

  172. 				display: block;

  173. 				line-height: 1;

  174. 			}

  175. 			code, pre > code {

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

  177. 				font-size: 1.0rem;

  178. 				line-height: 1.42;

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

  180. 			}

  181. 			pre > code {

  182. 				font-size: 0.9rem;

  183. 				width: 52.5%;

  184. 				margin-left: 2.5%;

  185. 				overflow-x: auto;

  186. 				display: block;

  187. 			}

  188. 			a:link,

  189. 			a:visited {

  190. 				color: inherit;

  191. 				text-underline-offset: 0.1em;

  192. 				text-decoration-thickness: 0.05em;

  193. 			}

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

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

  196. 				margin-top: 0.25rem;

  197. 			}

  198. 

  199. 		</style>

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

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

  202. 		<script>

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

  204. 			function onDocumentLoad() {

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

  206. 				setTimeout(onMarkdownChange, 0);

  207. 			}

  208. 			function onMarkdownChange() {

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

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

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

  212. 			}

  213. 

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

  215. 		</script>

  216. 	</head>

  217. 

  218. 	<body>

  219. 		<div class="inputhalf half">

  220. 			<textarea id="markdowninput">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis vel metus ut tempor. Morbi dictum, velit quis venenatis consequat, ante leo dignissim magna, quis efficitur ex magna nec ex. In egestas aliquet tortor, vitae posuere dui lobortis ac. Pellentesque quis hendrerit lorem. In maximus ut sapien vel tristique. Pellentesque ut tincidunt orci. Phasellus dignissim massa sit amet tellus placerat finibus. Ut elementum tortor ex, non aliquam libero semper eu.

  221. 

  222. Duis gravida convallis nisi ullamcorper tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum varius arcu non molestie. Ut cursus, lorem nec pellentesque interdum, augue risus pellentesque ligula, at vehicula turpis mi vitae nisi. Vivamus pulvinar eget lorem non lacinia. Pellentesque pretium ex at metus elementum semper. Donec tincidunt metus ac ex aliquam, ac iaculis purus facilisis. Phasellus iaculis scelerisque nisl, eu molestie dui sollicitudin sed. Suspendisse ut felis porttitor, sollicitudin urna in, venenatis neque. Donec nec mi ultrices, molestie quam quis, iaculis libero.

  223. 

  224. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut congue consequat vestibulum. Etiam luctus, leo placerat ullamcorper venenatis, nunc metus fringilla sapien, id elementum tellus nulla eu nunc. Integer pulvinar egestas scelerisque. Sed accumsan libero eget pretium sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla pretium egestas elit id cursus. Morbi euismod elementum eros ut eleifend. Praesent velit sem, faucibus sed sapien sit amet, pellentesque fermentum nibh. Nulla consequat turpis nec lacus consequat, sed congue magna consectetur. Nam id urna rhoncus, consectetur eros ac, tempor nisl.

  225. 

  226. Curabitur fermentum nunc sed dapibus feugiat. Etiam volutpat viverra eros sit amet tristique. Suspendisse cursus venenatis accumsan. Suspendisse venenatis vehicula lectus, sed venenatis augue pretium eu. Cras dui eros, iaculis in dictum hendrerit, tincidunt ut sapien. Ut nec nulla ut mauris cursus tincidunt. Suspendisse interdum pulvinar elit sit amet auctor. Donec id lacus tincidunt, varius elit non, tempor felis.

  227. 

  228. Quisque posuere, libero ac elementum maximus, lacus nulla lobortis nibh, id aliquam tortor lacus vel quam. Nunc eget dolor non nunc sagittis varius. Proin viverra vestibulum placerat. Fusce placerat interdum diam quis sollicitudin. Praesent sed tincidunt orci. Suspendisse lectus lorem, porta vel quam sit amet, pharetra interdum purus. Suspendisse ac lacus consequat, dapibus nunc in, porttitor purus. Nam dictum elit eget massa tincidunt tempus. Vestibulum blandit, lorem et accumsan tristique, orci dolor vulputate magna, et posuere lorem sapien non sapien. Vivamus nulla justo, eleifend et metus sit amet, gravida iaculis erat. Fusce lacinia cursus accumsan. 

  229. 			</textarea>

  230. 		</div>

  231. 		<div class="previewhalf half">

  232. 			<div id="preview">

  233. 				<p>Preview here</p>

  234. 			</div>

  235. 		</div>

  236. 	</body>

  237. </html>