Skip to content

Instantly share code, notes, and snippets.

@pjamar
Created February 2, 2025 04:25
Show Gist options
  • Save pjamar/fbab5e718377ee1bd184112b84816889 to your computer and use it in GitHub Desktop.
Save pjamar/fbab5e718377ee1bd184112b84816889 to your computer and use it in GitHub Desktop.
Readability Full
// bookmarklet-title: ReaderFull
// bookmarklet-about: Mozilla's readability (https://github.com/mozilla/readability) replacing page content.
import { Readability } from 'https://esm.sh/@mozilla/readability';
// Create a reader instance and parse the current document
const reader = new Readability(document.cloneNode(true)).parse();
// Create the new content
const content = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${reader.title}</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #fff;
color: #333;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
figcaption {
font-size: 0.8em;
text-align: center;
color: #666;
}
h1 {
font-size: 2em;
margin-bottom: 1em;
}
@media (prefers-color-scheme: dark) {
body {
background: #222;
color: #eee;
}
figcaption {
color: #aaa;
}
}
</style>
</head>
<body>
<h1>${reader.title}</h1>
${reader.content}
</body>
</html>
`;
// Replace the entire document
document.documentElement.innerHTML = content;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment