Modernize Docs UI with Tailwind, Dark Mode, and Improved Layout by samarJ19 · Pull Request #3814 · markedjs/marked

samarJ19 · 2025-10-21T15:43:27Z

Marked version:

Markdown flavor: CommonMark | GitHub Flavored Markdown | Markdown.pl | n/a

Description
This PR modernizes the documentation page for the MarkedJS website:

Refactors the docs UI using Tailwind CSS for a clean, modern look.
Improves layout spacing, section alignment, and overall readability.
Implements dark mode support with proper styling for code blocks and prose.
Simplifies the responsive design, removing unnecessary complexity while maintaining accessibility.
Ensures the GitHub corner banner is always visible and correctly positioned.
Refactors JavaScript for navigation highlighting, theme toggling, and copy-to-clipboard functionality.
Fixes all ESLint errors and passes linting and style checks.
Preserves the original docs structure while enhancing the user experience.
Adds screenshots of the new UI for visual reference.
Result
The documentation page now features a visually appealing, modern design with improved usability and accessibility. All code changes pass existing tests and linting requirements.

Contributor
No new tests required for this PR (UI/UX changes only).
All code changes are documented and follow project conventions.
Committer
CI is green.
Ready for squash and merge following conventional commit guidelines.

Screenshots:

vercel · 2025-10-21T15:43:34Z

@samarJ19 is attempting to deploy a commit to the MarkedJS Team on Vercel.

A member of the Team first needs to authorize it.

gemini-code-assist · 2025-10-21T15:43:49Z

Summary of Changes

Hello @samarJ19, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly overhauls the documentation page for the MarkedJS website, transforming its appearance and functionality. The core objective is to deliver a modern, visually appealing, and highly usable experience for users. This is achieved through a comprehensive migration to Tailwind CSS, the introduction of a seamless dark mode, and a general improvement in layout and interactive elements.

Highlights

UI Modernization: The documentation UI has been completely refactored using Tailwind CSS, resulting in a clean and modern aesthetic.
Dark Mode Implementation: Full dark mode support has been added, including proper styling for code blocks and prose content.
Improved Layout and Readability: The overall layout, spacing, and section alignment have been enhanced for better readability and user experience.
Simplified Responsive Design: The responsive design has been streamlined, removing unnecessary complexity while maintaining accessibility.
Persistent GitHub Corner: The GitHub corner banner is now consistently visible and correctly positioned across different views.
JavaScript Refactoring: Key JavaScript functionalities, such as navigation highlighting, theme toggling, and copy-to-clipboard, have been refactored for improved performance and maintainability.
Code Quality: All ESLint errors have been addressed, and the codebase now passes linting and style checks.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request modernizes the documentation page for the MarkedJS website using Tailwind CSS, improves layout and readability, and implements dark mode support. The changes include refactoring the HTML structure, adding Tailwind CSS configuration, updating CSS styles, and modifying JavaScript for theme toggling and other functionalities. I have provided comments to address potential issues related to accessibility, code clarity, and styling consistency.

gemini-code-assist · 2025-10-21T15:45:03Z

docs/_document.html

+              id="theme-toggle"
+              aria-label="Toggle dark mode"
+              class="flex items-center gap-2 px-4 py-2 rounded-lg text-subtle-light dark:text-subtle-dark hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            >
+              <span class="material-icons dark:hidden">dark_mode</span>
+              <span class="dark:hidden text-sm font-medium">Dark Mode</span>
+              <span class="material-icons hidden dark:inline">light_mode</span>
+              <span class="hidden dark:inline text-sm font-medium"
+                >Light Mode</span
+              >
            </button>


This button uses both text and an icon to convey its meaning. To ensure accessibility, it's important to provide a text alternative for the icon, especially for users who rely on screen readers. Consider using visually hidden text within the span to provide a descriptive label for screen readers.

For example:

<span class="sr-only">Toggle dark mode</span>

This will make the button more accessible to users with disabilities.

docs/_document.html

gemini-code-assist · 2025-10-21T15:45:03Z

docs/css/hljs-github.css

 .hljs-comment,
 .hljs-code,
 .hljs-formula {
-  /* prettylights-syntax-comment */
-  color: #6a737d;
+  color: var(--subtle-text-color);


Consider defining these color variables (subtle-text-color) within the root and dark sections to ensure consistency with the other color definitions. This will make it easier to maintain and update the color scheme in the future.

docs/css/shared.css

gemini-code-assist · 2025-10-21T15:45:04Z

docs/js/index.js

+    copyButton.className =
+      'absolute top-2 right-2 p-2 rounded-md bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity';


This class name is quite long and specific. While it's good to be descriptive, consider if there's a more concise way to express this styling, perhaps by combining some of these classes or using a more general class name that still accurately reflects the button's appearance.

Also, ensure that the contrast ratio between the text and background colors meets accessibility standards, especially in both light and dark modes.

gemini-code-assist · 2025-10-21T15:45:04Z

docs/js/index.js

+    copyButton.onclick = function() {
+      // Exclude the button's own text from being copied
+      const code = pre.querySelector('code').innerText;
+      navigator.clipboard.writeText(code);

-hashChange();
+      copyButton.innerHTML = '<span class="material-icons text-sm">done</span>';

-document.addEventListener('DOMContentLoaded', function() {
-  const div = document.createElement('div');
-  div.innerHTML = '<div class="tooltip-copy"><img src="/img/copy-icon.svg" class="icon-copy" title="Click to Copy" /></div>';
-  div.className = 'div-copy';
-
-  const allPres = document.querySelectorAll('pre');
-  allPres.forEach(function(pre) {
-    let timeout = null;
-    const copy = div.cloneNode(true);
-    pre.appendChild(copy);
-    pre.onmouseover = function() {
-      copy.classList.add('active');
-    };
-    pre.onmouseleave = function() {
-      clearTimeout(timeout);
-      copy.classList.remove('active');
-      copy.classList.remove('click');
-    };
-    copy.onclick = function() {
-      navigator.clipboard.writeText(pre.textContent);
-      copy.classList.add('click');
      clearTimeout(timeout);
      timeout = setTimeout(function() {
-        copy.classList.remove('click');
-      }, 3000);
+        copyButton.innerHTML =
+          '<span class="material-icons text-sm">content_copy</span>';
+      }, 2000);
    };


Consider adding a comment explaining why the timeout is set to 2000ms. This will help future developers understand the reasoning behind this value and make informed decisions if they need to adjust it.

For example:

// Timeout set to 2000ms to allow sufficient time for the 'done' icon to be visible before reverting.

vercel · 2025-10-22T06:48:49Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
marked-website	Ready	Preview	Comment	Nov 9, 2025 9:12pm

UziTech

Looks like light/dark mode is broken on the demo site
Light/Dark mode changes aren't saved
The github banner doesn't change colors on light/dark mode changes

samarJ19

fixes : 1. light/dark mode of demo page
2. Light/Dark mode changes are now getting saved
3. The github banner change colors on light/dark mode changes

samarJ19

fixed linting errors

UziTech

Can we do something with mobile? Maybe hide the nav in a button and make the main part full width?

samarJ19

I have added mobile responsive design, kindly review it

UziTech

Most of the links in the navigation don't work

samarJ19

Fixed the broken links of nav bar

UziTech

A couple more issues:

When dark mode is on any time the page changes there is a bright flash.
The urls for the pages changed so any links to the documentation will be broken.

samarJ19

Fixed Dark Mode Flash on Page Navigation
Added an inline script in that runs before any CSS/JS loads to apply the .dark class synchronously based on localStorage or system preference. This prevents the bright white flash that occurred when navigating between pages in dark mode.

Technical detail: The theme is now applied before first paint instead of after DOM load, eliminating the FOUC (Flash of Unstyled Content).

Preserved Backwards Compatibility for Documentation URLs
Modified build.js to generate both URL formats for each page:

New format: using_pro.html, using_advanced.html, etc.
Clean URL format: using_pro/index.html, using_advanced/index.html, etc.
This ensures existing external links and bookmarks (e.g., /using_pro, /using_pro#renderer) continue to work without breaking, while new relative links (.html extensions) also function correctly.

Result: Zero breaking changes for existing documentation links across the web.

UziTech

Looks like the demo still has the flash in dark mode

samarJ19

Fixed demo page dark mode problem, by adding a centralized dark mode theme variable

UziTech

This looks great! Thank you! 💯

styfle · 2025-11-04T17:03:50Z

Clicking the hamburger icon doesnt do anything on desktop. Perhaps it should be hidden?
Clicking on headers no longer works

styfle · 2025-11-04T17:05:39Z

Clicking this link is incorrectly linking to /using_advanced.html#extensions instead of the correct /using_advanced#extensions

docs/build.js

samarJ19

Implemented requested changes

styfle · 2025-11-06T14:39:32Z

docs/build.js

Is anything changing in this file or is it just formatting?

And if its just formatting, why is the formatting changing?

Seems we either have a bug that isn't formatting this file or your IDE has different formatting than this repo.

Have fixed my prettier configuration (disabled it), now it should not have any formatting issue

I still see this file is changed. Can you revert?

Yes you were right , there were few stylistic changes that I have made but they do not add anything to project so I have reverted the build file to its original state, made sure that tests are running and all the other features are also running as they should. Kindly check the latest commit and also check the horizontal scrollbar issue you were talking about

styfle · 2025-11-06T14:47:21Z

Nit pick: when I have a device at 775px width, I still see the menu and have to use a horizontal scrollbar.

Perhaps the menubar shouldn't be visible until 1024px wide or greater.

samarJ19

Fixes menubar and horizontal scrollbar problem by increasing the width of breakpoints

samarJ19

Reverted build.js

styfle

Great work, thanks! 🎉

styfle · 2025-11-13T20:31:13Z

@samarJ19 I just realized this is no longer respecting the system theme when I have my system set to dark mode and visit https://marked.js.org

I also confirmed I don't have any cookies set.

samarJ19 · 2025-11-16T10:21:13Z

hey @styfle I have fixed the initial system preference error in my latest PR so please check it out

samarJ19 added 5 commits October 16, 2025 16:24

fix: fix link issues of _doc.html

d14d0da

fix:wrong changes done

612ff0a

changes to master

6b12b45

docs:Improved the UI for Docs page

6d40ea3

docs:final changes to UI redesign

d7f7436

gemini-code-assist bot reviewed Oct 21, 2025

View reviewed changes

vercel bot deployed to Preview October 22, 2025 06:49 View deployment

UziTech requested changes Oct 22, 2025

View reviewed changes

fix:fixes dark light mode toggle in demo page

2e9a6c7

samarJ19 commented Oct 22, 2025

View reviewed changes

fix: fixed linting error after dark mode changes

e85f119

samarJ19 commented Oct 22, 2025

View reviewed changes

samarJ19 requested a review from UziTech October 22, 2025 12:07

vercel bot deployed to Preview October 22, 2025 14:21 View deployment

UziTech requested changes Oct 22, 2025

View reviewed changes

feat:add mobile responsive design

abfa3a7

samarJ19 commented Oct 23, 2025

View reviewed changes

samarJ19 requested a review from UziTech October 23, 2025 08:23

vercel bot deployed to Preview October 23, 2025 14:46 View deployment

UziTech requested changes Oct 23, 2025

View reviewed changes

fix: fix broken links of nav bar

ea7d15f

samarJ19 commented Oct 24, 2025

View reviewed changes

samarJ19 requested a review from UziTech October 24, 2025 11:23

vercel bot deployed to Preview October 24, 2025 13:22 View deployment

UziTech requested changes Oct 24, 2025

View reviewed changes

fix:dark mode flash fix and backward url compatibility

beb904e

samarJ19 commented Oct 24, 2025

View reviewed changes

UziTech requested changes Oct 25, 2025

View reviewed changes

samarJ19 added 2 commits October 26, 2025 09:54

fix:demo page fix

85bccdf

fix: fix linting error

b6ea5a7

samarJ19 commented Oct 26, 2025

View reviewed changes

samarJ19 requested a review from UziTech October 26, 2025 04:38

vercel bot deployed to Preview October 26, 2025 06:14 View deployment

UziTech approved these changes Oct 30, 2025

View reviewed changes

UziTech added the hacktoberfest-accepted label Oct 30, 2025

UziTech requested review from calculuschild and styfle October 30, 2025 15:02

styfle reviewed Nov 4, 2025

View reviewed changes

docs/build.js Outdated Show resolved Hide resolved

fix:clean url and hamburger menu button

57b3163

samarJ19 commented Nov 5, 2025

View reviewed changes

samarJ19 requested a review from styfle November 5, 2025 12:02

vercel bot deployed to Preview November 5, 2025 14:55 View deployment

styfle reviewed Nov 6, 2025

View reviewed changes

fix:fix formatting issues and more device inclusive responsive design

555fa43

samarJ19 commented Nov 6, 2025

View reviewed changes

samarJ19 requested a review from styfle November 6, 2025 20:16

fix: reverts build.js to original state

d5dff75

samarJ19 commented Nov 8, 2025

View reviewed changes

vercel bot deployed to Preview November 9, 2025 21:12 View deployment

styfle approved these changes Nov 9, 2025

View reviewed changes

UziTech merged commit 23b9d01 into markedjs:master Nov 10, 2025
7 checks passed

samarJ19 mentioned this pull request Nov 16, 2025

chore(docs): prevent theme flash by respecting system preference on initial load #3840

Merged

2 tasks

		copyButton.className =
		'absolute top-2 right-2 p-2 rounded-md bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity';

Comments

Conversation

samarJ19 commented Oct 21, 2025

Uh oh!

vercel bot commented Oct 21, 2025

Uh oh!

gemini-code-assist bot commented Oct 21, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gemini-code-assist bot Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gemini-code-assist bot Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

UziTech left a comment

Choose a reason for hiding this comment

Uh oh!

samarJ19 left a comment

Choose a reason for hiding this comment

Uh oh!

samarJ19 left a comment

Choose a reason for hiding this comment

Uh oh!

UziTech left a comment

Choose a reason for hiding this comment

Uh oh!

samarJ19 left a comment

Choose a reason for hiding this comment

Uh oh!

UziTech left a comment

Choose a reason for hiding this comment

Uh oh!

samarJ19 left a comment

Choose a reason for hiding this comment

Uh oh!

UziTech left a comment

Choose a reason for hiding this comment

Uh oh!

samarJ19 left a comment

Choose a reason for hiding this comment

Uh oh!

UziTech left a comment

Choose a reason for hiding this comment

Uh oh!

samarJ19 left a comment

Choose a reason for hiding this comment

Uh oh!

UziTech left a comment

Choose a reason for hiding this comment

Uh oh!

styfle commented Nov 4, 2025

Uh oh!

styfle commented Nov 4, 2025

Uh oh!

Uh oh!

samarJ19 left a comment

Choose a reason for hiding this comment

Uh oh!

styfle Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

samarJ19 Nov 6, 2025

vercel bot commented Oct 22, 2025 •

edited

Loading