Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support href="file://" in <link rel="stylesheet">. #99

Open
RokeJulianLockhart opened this issue Dec 7, 2024 · 2 comments
Open

Support href="file://" in <link rel="stylesheet">. #99

RokeJulianLockhart opened this issue Dec 7, 2024 · 2 comments

Comments

@RokeJulianLockhart
Copy link

RokeJulianLockhart commented Dec 7, 2024 •
edited
Loading

Description

When linked by a file:// URI inside the href="" argument of the <link rel="stylesheet"> tag, CSS3 does not render in .Markdown and .HTML files (in the renderer).

To compare, VS Code's native Markdown renderer does support this (albeit poorly). 1

Examples

  1. Rendered

    1. VS Code

      Image

    2. Firefox

      Image

  2. Source Markup

    1. HTML5 (WHATWG LS)

      <!DOCTYPE html>
<html lang="eng-GB-oxendict">
	<head>
		<meta
			http-equiv = "Content-Type"
			charset    = "utf-8"
			content    = "text/html; charset=utf-8"
		>
		<script type="text/javascript">
			// Title Variable Assignment:
				let title = "Placeholder";
				document.title = title;
		</script>
		<title>
			<script type="text/javascript">
				// Title Tag Assignment:
					document.write(title);
			</script>
		</title>
		<link
			type = "text/css"
			rel  = "stylesheet"
			href = "file:///run/media/RokeJulianLockhart/%7B%20Name:%20Data,%20Identifier:%20S11VZD%20%7D/@%7B'Name'='Entities'%7D%23.dir/@%7B'Status'='Commenced'%3b%20'Name'='In%20Use'%7D%23.dir/@%7B'Person'='Beedell'%3b%20'Identifier'='S21AIB'%7D%23.dir/@%7B'Name'='Entity-Specific'%7D%23.dir/@%7B'Person'='Roke'%3b%20'Identifier'='S1EV2L'%7D%23.dir/@%7B'Name'='Technical'%7D%23.dir/@%7B'Name'='Application%20Data'%7D%23.dir/@%7B'Name'='Git'%7D%23.dir/@%7B'Name'='GitLab.com'%7D%23.dir/@%7B'Account'='RokeJulianLockhart'%7D%23.dir/sg5n9q/@%7B'Name'='Content'%3b%20Identifier='SLZS1K'%7D%23.dir/@%7B'Name'='Technical'%3b%20Identifier='SLZS47'%7D%23.dir/@%7B'Status'='Commenced'%3b%20'Name'='HTML%20Resources'%7D%23.dir/@%7B'Name'='CSS%203%20Stylesheet'%3b%20'Identifier'='SIFDYR'%7D%23.txt.CSS#:~:text=/*,%7D"
		>
	</head>
	<body>
		<header>
		</header>
		<main>
			<article>
				<h1>
					<script type="text/javascript">
						document.write(title);
					</script>
				</h1>
				<ol>

					<li> <section> <h2> Placeholder </h2>

						<p> Body text placeholder. </p>

					</section> </li>

				</ol> </section> </li>

				<ol>
			</article>
		</main>

		<footer>

			<h2> Metadata </h2> <ol>

				<li> <section>

					<h2> Timestamp of Most Recent Modification Subsequent to Publishment </h2>

						<p>
							<time datetime="+T+00:00">
								<code>+T+00:00</code>
							</time>
						</p>

				</section> </li>

				<li> <section>

					<h2> Author </h2>

						<p> Mr. Beedell, Roke Julian Lockhart </p>

				</section> </li>

			</ol>
		</footer>

		<script
			type = "text/JavaScript"
			src  = "file:///run/media/RokeJulianLockhart/%7B%20Name:%20Data,%20Identifier:%20S11VZD%20%7D/@%7B'Name'='Entities'%7D%23.dir/@%7B'Status'='Commenced'%3b%20'Name'='In%20Use'%7D%23.dir/@%7B'Person'='Beedell'%3b%20'Identifier'='S21AIB'%7D%23.dir/@%7B'Name'='Entity-Specific'%7D%23.dir/@%7B'Person'='Roke'%3b%20'Identifier'='S1EV2L'%7D%23.dir/@%7B'Name'='Technical'%7D%23.dir/@%7B'Name'='Application%20Data'%7D%23.dir/@%7B'Name'='Git'%7D%23.dir/@%7B'Name'='GitLab.com'%7D%23.dir/@%7B'Account'='RokeJulianLockhart'%7D%23.dir/sg5n9q/@%7B'Name'='Content'%3b%20Identifier='SLZS1K'%7D%23.dir/@%7B'Name'='Technical'%3b%20Identifier='SLZS47'%7D%23.dir/@%7B'Status'='Commenced'%3b%20'Name'='HTML%20Resources'%7D%23.dir/@%7B'Name'='ECMAScript%202023%20(ES14)%20Functionality'%3b%20'Identifier'='SISGH5'%7D%23.txt.JS#:~:text=%23!/usr/bin/env%20xdg%2Dopen,%7D">
			// This is an external script. It is at the bottom of the file to ensure that loading it doesn't prevent the content which precedes it from being loaded.
		</script>
	</body>
</html>

    2. ECMAScript (ES) 2024

      #!/usr/bin/env xdg-open

/*
	<h2>
		Common Syntax Highlighting Variables
	</h2>
*/

	let langPrefix  = "mis";
	let classPrefix = "language";
	let typePrefix  = "x";

/*
	<h2>
		Unknown
	</h2>
*/

	document.querySelectorAll("table:not(:has(thead))").forEach((table) => {
		const tableWidth = table.offsetWidth;
		const maxWidth   = tableWidth * 0.3; // 30% of the table's width
		const thElements = table.querySelectorAll("th");

		thElements.forEach((th) => {
			const contentWidth = getTextWidth(th.innerText, getComputedStyle(th).font);
			th.style.minWidth = `${Math.min(contentWidth, maxWidth)}px`;
		});
	});

	function getTextWidth(text, font) {
		const canvas  = document.createElement("canvas");
		const context = canvas.getContext("2d");

		context.font = font;
		return context.measureText(text).width;
	}

/*
	<h2>
		Table (Column) Numeration
	</h2>
*/

	/*
		<h2>
			Commonly Utilized Method
		</h2>
	*/

		/**
		* Adds sequential numbering to the first cell of each row in a table with the class "`nr`".
		*/

		var a = document.getElementsByClassName("nr");
		for (var i = 0; i < a.length; i++) {
			a[i].innerHTML = (i+1)+".";
		}

			/*
				<section>
					<h2>
						Task
					</h2>
					<p>
						As <a href="https://stackoverflow.com/questions/21280254/put-ordered-list-in-a-table-row-tr-is-it-possible#comment138550096_51535254:~:text=This%20solution%20solely%20appears%20to%20work%20in%20tables%20with%20vertical%20headings.%20Not%20horizontal%20ones%2C%20like%20%3Ctable%3E%3Ctr%3E%3Cth%3E%20Heading%20%3C/th%3E%3Ctd%3E%20Body%20%3C/td%3E%3C/tr%3E%3C/table%3E.%20It%20also%20doesn't%20restart%20per%20table.%20I%20might%20just%20be%20dumb.">stackoverflow.com/questions/21280254/put-ordered-list-in-a-table-row-tr-is-it-possible#comment138550096_51535254</a> demonstrates, you should submit your horizontally heading'd version as an alternative in an edit to the answer.
					</p>
				</section>

				<section>
					<h2>
						Citation of Origin
					</h2>
					<p>
						<a href="https://stackoverflow.com/revisions/51535254/1#:~:text=%3Cscript%20type=%22text/javascript%22%3E,%3C/script%3E">
							<code>
								stackoverflow.com/revisions/51535254/1
							</code>
						</a>
					</p>
				</section>
			*/

	/*
		<h2>
			Potentially Unutilized Method
		</h2>
	*/

		/**
			1. Adds sequential numbering to the first cell of each row in a table.
			2. ~~~JS
			   @param {string} cl // The class name of the table to be numbered.
			   ~~~
		*/

		var addNumeration = function(cl) {
			var table = document.querySelector('table.' + cl);
			var trs = table.querySelectorAll('tr');
			var counter = 0;

			Array.prototype.forEach.call(
				trs, function(x,i) {
					var firstChild = x.children[0];
					if (firstChild.tagName === 'TH') {
						var cell = document.createElement('th');
						cell.textContent = counter ++;
						x.insertBefore(cell, firstChild);
					}
					else {
						firstChild.setAttribute('colspan', 2);
					}
				}
			)
		}

		addNumeration("numberedTable");

			/*
				<section>
					<h2>
						Citation of Origin
					</h2>
					<p>
						<a href="https://stackoverflow.com/questions/17012421/auto-number-table-rows#comment138214196_39540974:~:text=Is%20it%20possible%20to%20use%20this%20only%20to%20apply%20to%20a%20class%20of%20%3Cth%3E%20tags?%20I%20ask%20because%20in%20tables%20with%20both%20vertical%20and%20horizontal%20headings%2C%20it%20may%20be%20necessary%20to%20distinguish%20between%20them.">
							SO
						</a>
					</p>
				</section>
			*/

/*
	<article>
		<h2>
			Redaction of Extraneous Indentation
		</h2>
		<p>
			I don't know what to put here.
		</p>
	</article>

	<article>
		<h2>
			Table Row Content Hider
		</h2>
		<p>
			This should be repurposable for anything, but appears to require an tag to invoke it, like a <code>button</code> tag.
		</p>
	<article>
*/

	function toggle() {
		if (document.getElementById("hideContent").style.display == 'none') {
			document.getElementById("hideContent").style.display = '';
		} else {
			document.getElementById("hideContent").style.display = 'none';
		}
	}

    3. CSS3

      /*

	## Tasks

	1.	[ ] "Make Table Width 100% with Last Column Filling Remainder without squashing other columns content/width" [^1]
	2.	[ ] Include list indentation script. [^2]
	3.	[ ] Make `th`s truncate to the width of their accompanying `td`s. [^3]
	4. [ ] Round the blockquote border. [^4]

	[^1]: https://stackoverflow.com/revisions/13754148/2#:~:text=table%20%7B%20width%3A%20100%25%3B%20table%2Dlayout%3A%20auto%3B%20%7D
	[^2]: https://stackoverflow.com/revisions/2730079/4#:~:text=%3C!doctype%20html%3E,%3C/html%3E
	[^3]: https://chatgpt.com/share/67717288-f908-8006-97bb-95c47201611e
	[^4]: https://stackoverflow.com/q/67900777/9731176

*/

:root {

	/* Variables: */

		/* Font Size: */

			--horizontal-font-size: 1em;
				/* If you set this to `rem`, it'll break `small` when nested inside other tags, like `q`s. */
			--vertical-font-size: 1cap;

			font-size: var(--horizontal-font-size) !important;

		/* Block Padding: */

			--horizontal-block-padding: var(--horizontal-font-size);
			--vertical-block-padding: var(--vertical-font-size);

			--block-padding: var(--horizontal-font-size);
				/* IDK what `--block-padding` should be set to, really. */

		/* Border: */

			--border-radius: 0.25rem;

			--border-color: solid color-mix(in srgb, currentColor 50%, transparent);
			--border-width: 1px;

			--border: var(--border-width) var(--border-color);

			/*	1.	A revision of an answer to <cite>currentColor with opacity</cite> at Stack Overflow [^1]

					[^1]: https://stackoverflow.com/revisions/76462953/2#:~:text=color%2Dmix(in%20srgb%2C%20currentColor%2025%25%2C%20transparent);

				2.	A comment under <cite>How to use currentColor with rgba ?</cite> at GitHub [^2]

					[^2]: https://github.com/sass/sass/issues/2907#issuecomment-1531721223:~:text=This%20is%20working%20for%20me,color%2Dmix%20with%20currentColor%20are%20passing. */

		--indent-size: 2em;
			tab-size: var(--indent-size) !important;
			text-indent: 0 !important;

	/* Properties: */

		color-scheme: light dark !important;
			/* This has to be in the `:root` selector. `body` doesn't work. IDK why. */

		/* font-family: monospace; */

}

body {

	/* Margin: */
		/* Horizontal: */
			margin-left: var(--horizontal-block-padding) !important;
			margin-right: var(--horizontal-block-padding) !important;
		/* Vertical: */
			margin-bottom: var(--vertical-block-padding) !important;
			margin-top: var(--vertical-block-padding) !important;

	padding: 0 !important;

}

	/*	~~~YAML
		Type : Citation of Origin
		URI  : https://stackoverflow.com/revisions/13754148/2#:~:text=body%20%7B%20%20%20%20,%7D
		~~~ */

/* Non-Title Text: */

	:not(h1, small) { font-size: var(--horizontal-font-size) !important; }

		/*	~~~YAML
			Type : Citation of Information
			URI  : https://github.com/microsoft/vscode/issues/219520#issue-2383827208:~:text=OS%20Version%20%09cpe:/o:fedoraproject:fedora:40-,Steps%20to%20Reproduce,-I've%20set%20markdown.preview.fontSize
			~~~ */

	hr {
		border: none !important;
		height: 1px !important;
		background-color: #000000 !important;
	}

		/*	~~~YAML
			Type :
			URI  : https://stackoverflow.com/revisions/4151770/5#:~:text=hr%20%7B,%7D
			~~~ */

/* Headings: */

	h1, h2, h3, h4, h5, h6 {

		margin-bottom: var(--vertical-block-padding) !important;
		margin-top: var(--vertical-block-padding) !important;
		padding-bottom: calc(0.5 * var(--vertical-block-padding)) !important;

			/*	~~~YAML
				Type : Citation of Origin
				URI  : https://stackoverflow.com/revisions/16073356/1#:~:text=h1%20%7B%20border%2Dbottom:%201px%20solid%20black%20%7D
				~~~ */

	}

	h1, h2, h3, h4, h5, h6, th {
		font-weight: bold !important;
		color: color-mix(in srgb, currentColor 75%, transparent) !important;
	}

	h2, h3, h4, h5, h6 {
		border-bottom: var(--border) !important;
	}

		/* Titles: */

			h1 {
				font-size: calc(1.5 * var(--horizontal-font-size)) !important;
				margin-top: 0 !important;
				margin-bottom: 0 !important;
				padding-top: 0 !important;
				padding-bottom: 0 !important;
			}

/* Indentation: */

	div.block-indent {
		margin-left: 0 /* var(--horizontal-block-padding) */ !important;
		margin-bottom: 0 /* var(--vertical-block-padding) */ !important;
	}

/* Tables: */

	table:not(td table):not(th table) {
		margin-left: calc(0.125 * var(--horizontal-block-padding)) !important;
		margin-right: calc(0.125 * var(--horizontal-block-padding)) !important;
		margin-top: var(--vertical-block-padding) !important;
		margin-bottom: var(--vertical-block-padding) !important;
	}

	td table, th table {
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	table {
		border-collapse: collapse !important;
		width: auto !important;
	}

	table+table,
	table:is(:has(+ table)) {
		width: 100% !important;
		table-layout: auto !important;
			/* Allows content-based column sizing. */
	}

	th, td {

		border: var(--border) !important;
		padding-left: calc(0.5 * var(--horizontal-block-padding)) !important;
		padding-right: calc(0.5 * var(--horizontal-block-padding)) !important;
		padding-top: calc(0.25 * var(--vertical-block-padding)) !important;
		padding-bottom: calc(0.25 * var(--vertical-block-padding)) !important;

		width: auto !important;
		overflow-wrap: break-word !important;

		text-align: inherit !important;
		vertical-align: top !important;

		/*	~~~YAML
			Type : Citation of Origin
			URI  : https://stackoverflow.com/revisions/5671714/2#:~:text=Add%20a%20vertical%2Dalign%20property%20to,see%20examples%20at%20Mozilla's%20documentation.
			~~~ */

	}

	/* Ensure affected tables use auto layout. */

		table+table,
		table:is(:has(+ table)) {
			width: 100% !important;
			table-layout: auto !important;
		}

	/* Set a minimum width for `th` to ensure they don't shrink too much. */

		table+table th,
		table:is(:has(+ table)) th {
			width: auto !important;
		}

	/* Allow last `td` in affected tables to stretch without overlap. */

		table+table td:last-child,
		table:is(:has(+ table)) td:last-child {
			width: 100% !important;
		}

/* Bordered: */

	code:not(pre code), pre blockquote {
		border: var(--border) !important;
		border-radius: var(--border-radius) !important;
		background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
	}

	blockquote {

		border: var(--border-width) var(--border-color) !important;
			/* This should be `1cap`, but isn't. */
		background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
		border-radius: var(--border-radius) !important;

		/* Margin: */

			margin-top: inherit !important;
			margin-bottom: inherit !important;
			margin-left: 0 !important; /* What does this inherit from? */
			margin-right: inherit !important;

		/* Padding: */

			/* What does this inherit from? */
				padding-left: calc(1 * var(--horizontal-block-padding)) !important;
				padding-right: calc(1 * var(--horizontal-block-padding)) !important;

			padding-bottom: 0 !important;
			padding-top: 0 !important;

	}

/* Lists: */

	ol { list-style-type: decimal; }

	ol, ul {

		list-style-position: outside !important;
		padding-left: 0 !important;
		margin-left: 2rem !important;

			/*	~~~YAML
				Type : Citation of Origin
				URI  : https://stackoverflow.com/revisions/26213863/13#:~:text=preferred%20solution%20to-,remove%20%3Cul%3E%20indentation,-is%20a%20simple
				~~~ */

	}

/* Invisible: */

	.hidden {
		visibility: collapse !important;
		display: none !important;
	}

			/*	~~~YAML
				Type : Citation of Origin
				URI  : https://stackoverflow.com/revisions/45861734/1#:~:text=If%20you%20want%20to%20hide%20a%20row%20in%20a%20table%20you%20could%20just%20set%20display:%20none%20on%20it.
				~~~ */

/* Collapsed: */

	details > summary:first-of-type {
		list-style-type: none !important;
	}
	tr.child-row td {
		padding-left: var(--horizontal-block-padding) !important;
	}
		/* This needs to be changed to `em`. Probably `2rem`. */

	tr.child-row th {
		padding-left: var(--horizontal-block-padding) !important;
	}

		/*	〃
			~~~YAML
			Type : Citation of Origin
			URI:
			  - https://stackoverflow.com/questions/20687826/indenting-borders-for-table-row-tr#comment138668813_20687949:~:text=Works%20well%2C%20but%20is%20there,table%20of%20Ltr%20Latin%20text)
			  - https://stackoverflow.com/revisions/20687949/2#:~:text=since%20tr%20doesn't%20accept%20margin,jsFiddle%20to%20show%20the%20latter.
			~~~ */

	code {

		display: inline-block !important;

		/* Padding: */

			/* Horizontal: */

				padding-left: calc(0.25 * var(--horizontal-block-padding)) !important;
				padding-right: calc(0.25 * var(--horizontal-block-padding)) !important;

			/* Vertical: */

				padding-top: 0 !important;
				padding-bottom: 0 !important;

		/*

			## Margin

			The undermentioned `margin`s need to be reduced between `li`s with `code`s. See [this GPT-4o answer][1].

			[1]: https://stackoverflow.com/revisions/20687949/2#:~:text=since%20tr%20doesn't%20accept%20margin,jsFiddle%20to%20show%20the%20latter.

		*/

			margin-bottom: calc(0.125 * var(--vertical-block-padding)) !important;
			margin-top: calc(0.125 * var(--vertical-block-padding)) !important;
	}

			/*	~~~YAML
				Type : Citation of Origin
				URI  : https://stackoverflow.com/revisions/19608010/2#:~:text=%23s2%20%7B-,display:%20inline%2Dblock;,-%7D.
				~~~ */

img {
	min-width : 5px;
	border: var(--border) !important;
	padding: 1px !important;
}

caption { padding-bottom: var(--vertical-block-padding) !important; }
figure { margin: 0 !important; }
a { text-decoration: none !important; }

/* Paragraphs: */

	p {
		margin-bottom: var(--vertical-block-padding) !important;
		margin-top: var(--vertical-block-padding) !important;
	}

	td p:first-of-type { margin-top: 0 !important; }
	td p:last-of-type { margin-bottom: 0 !important; }

button {
	margin-top: 0.75rem /* var(--vertical-block-padding) */ !important;
	border: var(--border) !important;
	border-radius: var(--border-radius) !important;
}

svg {
	fill: currentColor;
}

sup {
	font-size: calc(0.75 * var(--horizontal-font-size)) !important;
}

Environment

  1. Extension

    Identifier: searking.preview-vscode
Version: 2.3.17
Last Updated: 2024-12-11, 20:12:25

  2. VS Code

      1. #!/usr/bin/env sh
rpm -qa code
      2. code-1.96.4-1736991167.el8.x86_64
      1. #!/usr/bin/env sh
dnf info --refresh code-1.96.4-1736991167.el8.x86_64
      2. Updating and loading repositories:
 Fedora 41 - x86_64 - Updates                         100% |  51.9 KiB/s |  24.1 KiB |  00m00s
 RPM Fusion for Fedora 41 - Nonfree tainted           100% |  50.0 KiB/s |   8.5 KiB |  00m00s
 Fedora 41 openh264 (From Cisco) - x86_64             100% |   3.3 KiB/s | 989.0   B |  00m00s
 google-chrome-canary                                 100% |   5.6 KiB/s |   1.3 KiB |  00m00s
 Copr repo for Koi owned by birkch                    100% |  10.0 KiB/s |   1.5 KiB |  00m00s
 Fedora 41 - x86_64                                   100% |  41.5 KiB/s |  26.8 KiB |  00m01s
 RPM Fusion for Fedora 41 - Nonfree - Updates         100% |  20.2 KiB/s |   8.6 KiB |  00m00s
 RPM Fusion for Fedora 41 - Nonfree                   100% |  62.1 KiB/s |   9.2 KiB |  00m00s
 RPM Fusion for Fedora 41 - Free tainted              100% |  23.3 KiB/s |   7.9 KiB |  00m00s
 ProtonVPN Fedora Beta repository                     100% |  16.8 KiB/s |   3.7 KiB |  00m00s
 RPM Fusion for Fedora 41 - Free                      100% |  19.1 KiB/s |   8.5 KiB |  00m00s
 Visual Studio Code                                   100% |  15.3 KiB/s |   1.5 KiB |  00m00s
 RPM Fusion for Fedora 41 - Free - Updates            100% |  66.1 KiB/s |   8.0 KiB |  00m00s
 warpdotdev                                           100% |   8.4 KiB/s |   1.5 KiB |  00m00s
 google-chrome-canary                                 100% |   8.0 KiB/s |   3.2 KiB |  00m00s
Repositories loaded.
Installed packages
Name            : code
Epoch           : 0
Version         : 1.96.4
Release         : 1736991167.el8
Architecture    : x86_64
Installed size  : 381.7 MiB
Source          : code-1.96.4-1736991167.el8.src.rpm
From repository : @stored_transaction
Vendor          : Microsoft Corporation

Footnotes

  1. microsoft/vscode/issues/225927#issuecomment-2296941767 ↩
searKing added a commit that referenced this issue Dec 11, 2024
@searKing
feature(renders): support local file path(file://[abs_file_path]) u…
b88d014 
…ri in the built-in Markdown preview.

#99
searKing added a commit that referenced this issue Dec 11, 2024
@searKing
fix(renders): change relative dir from workspace_dir to markdown_file…
d619afc 
…_dir.

#99
@searKing
Copy link
Owner

  • relative and absolute file path is supported, but uri as 'file://[path]' is not supported.
  • preview-styles/page.css
h1 {
    color: green; /* 将h1元素的颜色设置为红色 */
}
  • test-workspace/test.md
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Footnote Example</title>
    <!-- Not Work -->
	<!-- <link rel="stylesheet" href="file:///Users/chenhaixin/workspace/src/github.com/searKing/preview-vscode/preview-styles/page.css"> -->
    <!-- Work -->
	<link rel="stylesheet" href="/data/workspace/src/github.com/searKing/preview-vscode/preview-styles/page.css">
    <!-- Work -->
    <!-- <link rel="stylesheet" href="../preview-styles/page.css"> -->
</head>
<body>
    <h1>Footnote Example</h1>
    <p>This is a paragraph with a footnote reference.<sup id="fnref1"><a href="#fn1">1</a></sup></p>

    <h2>Another Section</h2>
    <p>Here is another paragraph with a different footnote.<sup id="fnref2"><a href="#fn2">2</a></sup></p>

    <hr>
    <ol>
        <li id="fn1">
            This is the first footnote. <a href="#fnref1">↩</a>
        </li>
        <li id="fn2">
            This is the second footnote. <a href="#fnref2">↩</a>
        </li>
    </ol>

</body>
</html>
  • Preview Result
Clipboard_Screenshot_1733934243

@RokeJulianLockhart
Copy link
Author

Relative and absolute file path is supported, but URI as file://[path] is not supported.

@searKing, thanks! Consider this an FR for that, then - I'll modify the title.

@RokeJulianLockhart RokeJulianLockhart changed the title Render CSS in Markdown Preview. Support href="file://" in <link rel="stylesheet">. Dec 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@searKing @RokeJulianLockhart