https://marked.js.org/ has issue with #hash URLs in Google Chrome #1166
Comments
|
Tagging @styfle |
|
This is what we were talking about in #1156 (comment) If we still want to dynamically render the pages we will have to figure out the double hash problem. |
|
Also my comment from earlier: #1156 (comment) But to everyone's point, theses URLs don't look pretty. As for this bug specifically, I think it can be solved easily with a element.scrollIntoView() on page load. |
|
If we bail on the SPA and just use index.html everywhere, it would be an easy fix as well. Would still use Marked to render the content. Information architecture: /
/authors
/contributing
/demo
/license
/publishing
/using
/advanced
/proEach directory could have an index.html (pretty much the same one except for what Could use a Jekyll build to generate the static pages in each directory (to cut down on copy-paste of header and footer content)...nice to have for such a small site. |
|
See also #1167 |
That's certainly easier, but using Jekyll means we would not be dogfooding marked (since the md to html conversion is handled by Jekyll). |
|
I think I figured it out in #1168 |
|
I don't think we have to abandon dogfooding, to be honest. We would use Jekyll templates to bring in the head and foot - but still use Marked to render the Markdown. This would be called in each MD file. I might be able to put something together, if need be. Head template file<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Marked.js Documentation</title>
<style>
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
}
#container {
position: relative;
max-width: 800px;
margin: auto;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
}
header { display: flex; }
header h1 { margin: 0; }
table {
border-spacing: 0;
border-collapse: collapse;
border: 1px solid #ddd;
}
td, th {
border: 1px solid #ddd;
padding: 5px;
}
a {
color: #0366d6;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
pre {
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #f6f8fa;
border-radius: 3px;
}
code:not([class]) {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
background-color: rgba(27,31,35,0.05);
border-radius: 3px;
}
.github-ribbon {
position: absolute;
top: 0;
right: 0;
border: 0;
}
</style>
</head>
<body>
<div id="container">
<header>
<a href="README.md">
<img src="img/logo-black.svg" height="64px" width="64px" />
</a>
<h1>Marked.js Documentation</h1>
</header>
<a href="https://github.com/markedjs/marked">
<img class="github-ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
</a>
<div id="content"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/unfetch/dist/unfetch.umd.js"></script>Foot template file</body>
</html>Body templatesIndex file within each directory. Each calls a specific |
Expectation
#hash URLs work when opened from an external page or bookmark
Result
#hash URLs work only after an internal link with a hash is clicked after the page is loaded
What was attempted
Open https://marked.js.org/#usage in the last Google Chrome (I've checked dev and canary builds).
The page is not navigated to the section, it remains at the top.
This works in Firefox though.
It seems the cause is the page is rendered by script, while Chrome and Firefox read its structure before or after navigation attempt.
The text was updated successfully, but these errors were encountered: