I have almost completed my Technical Documentation page, which I decided would be a clone of the React JS Docs.
CodePen. (The project uses SCSS, but you may ignore that altogether for the solution).
The real React JS Docs page has three features which I have not been able to imitate. These are:
- The current Page section is always highlighted in the sidebar. (They have most probably implemented it using React-Router, but I want to know if this is possible using plain CSS-JS)
- The nav-bar on the top contains a search field, which collapses into a search-icon for smaller screens, it comes back to full width when focused.
- Code Syntax Highlighting - they have colored code block, while my code is all blue
Any help/guidance/resource on how to implement these features will be appreciated. Pure CSS solution, as well as Vanilla JS solutions are also welcome. But please do not use JQuery.
Thanks and Happy Coding!