docs: add custom CSS usage and warnings to user guide (#2705)
What is the purpose of this pull request?
- [x] Documentation update
- [ ] Bug fix
- [ ] Feature addition or enhancement
- [ ] Code maintenance
- [ ] DevOps
- [ ] Improve developer experience
- [ ] Others, please explain:
Overview of changes:
-
Adds a new section titled "Using Custom CSS in MarkBind" at the bottom of usingHtmlJavaScriptCss.md
-
Explains two methods to add custom styles:
-
Site-wide styles using site.json
-
Page-specific inline
-
Includes warnings about conflicts with MarkBind’s built-in component styles
-
Provides code examples and best practices
Anything you'd like to highlight/discuss:
-
The section was added just before the {% previous_next %} block to maintain structure
-
IntelliJ may show false warnings (e.g., unrecognized tags), but site renders fine
-
Let me know if you'd like it moved to a different file or split out for better discoverability
Testing instructions:
-
Serve the site locally: npx markbind serve packages/core/docs/userGuide
-
Navigate to "Using HTML, JavaScript, CSS" in the user guide sidebar
-
Scroll to the bottom and verify:
- The section on Using Custom CSS is visible
- Code samples are highlighted correctly
- Warnings and tips are clearly displayed
Proposed commit message: (wrap lines at 72 characters)
docs: add custom CSS usage and warnings to user guide (#2705)
Adds documentation to explain how users can add site-wide or inline custom CSS in MarkBind. Also includes best practices and warnings about overriding MarkBind's default component styles.
Checklist: :ballot_box_with_check:
- [x] Updated the documentation for feature additions and enhancements
- [ ] Added tests for bug fixes or features
- [x] Linked all related issues
- [x] No unrelated changes
Reviewer checklist:
Indicate the SEMVER impact of the PR:
- [ ] Major (when you make incompatible API changes)
- [x] Minor (when you add functionality in a backward compatible manner)
- [ ] Patch (when you make backward compatible bug fixes)
At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.
Breaking change release note preparation (if applicable):
- To be included in the release note for any feature that is made obsolete/breaking
Give a brief explanation note about:
- what was the old feature that was made obsolete
- any replacement feature (if any), and
- how the author should modify his website to migrate from the old feature to the replacement feature (if possible).
Codecov Report
:white_check_mark: All modified and coverable lines are covered by tests.
:white_check_mark: Project coverage is 52.84%. Comparing base (f681976) to head (3709477).
Additional details and impacted files
@@ Coverage Diff @@
## master #2736 +/- ##
=======================================
Coverage 52.84% 52.84%
=======================================
Files 130 130
Lines 7162 7162
Branches 1591 1596 +5
=======================================
Hits 3785 3785
Misses 3072 3072
Partials 305 305
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
Hi @arshinsikka, thanks for the contribution. As mentioned by Copilot, it would be good to include a warning to users about the use of custom css as it may conflict with MarkBind's default css, leading to unexpected behavior. You also mentioned "two common ways" but only included one way 😅
Regarding the site-wide custom stylesheet you mentioned, I wasn't able to get it to work using those instructions. Its possible that this method of adding custom css isn't actually implemented by MarkBind yet as the user guide doesn't seem to mention "head" being a possible config option for site.json. Its also possible I messed up on my end so if you were able to get it to work, do let me know!