Please analyze the HTML of the website I'm providing and create custom styling that enhances readability and aesthetics, along with a syntax highlighting script for code blocks. The goal is to transform the website into a more modern, readable experience while preserving its content and structure.
- A custom Stylus CSS stylesheet that improves the overall design, typography, and readability
- A Violentmonkey/Tampermonkey JavaScript that adds syntax highlighting to code blocks
- Use Google's Lora font for the main text (or suggest an alternative serif font that enhances readability)
- Create a clean, centered layout with appropriate max-width
- Improve spacing between elements (paragraphs, headings, lists, code blocks)
- Enhance readability with proper line height and font sizing
- Style code blocks with a clean, readable design
- Make images responsive and properly displayed
- Create a subtle, professional color scheme
- Ensure navigation elements are clear and accessible
- Add responsive design for mobile devices
- Preserve the website's content hierarchy and structure
- Use highlight.js or a similar library for syntax highlighting
- Automatically detect programming languages in code blocks when possible
- Create fallback language detection rules based on context
- Ensure the script doesn't conflict with existing website scripts
- Make the highlighting theme complement the overall design
- Preserve any special code formatting or highlighting from the original site
- Handle dynamic content if applicable
Please explain your design decisions and the reasoning behind your color scheme, typography choices, and layout adjustments. Note any specific challenges with the website structure and how you addressed them.
Please provide both the Stylus CSS and the JavaScript code as separate code blocks in your response, along with an explanation of how they work together and how to install them.