Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Need Help with Syntax Highlighting and Responsive Design Features #1

Open
ZigaoWang opened this issue Jul 15, 2024 · 1 comment
Open

Need Help with Syntax Highlighting and Responsive Design Features #1

ZigaoWang opened this issue Jul 15, 2024 · 1 comment
Labels
help wanted Extra attention is needed

Comments

@ZigaoWang
Copy link
Member

Hello everyone,

I'm currently working on the PySensei project, which is an interactive Python learning assistant. We are looking to improve the user experience by implementing the following features:

  1. Syntax Highlighting: Code snippets should be highlighted for better readability.
  2. Copy to Clipboard: Users should be able to easily copy code snippets to their clipboard.
  3. Responsive Design: The application should be optimized for both desktop and mobile devices.

Despite our best efforts, we are facing challenges in implementing these features effectively. We would greatly appreciate any help from the community to achieve these improvements.

Current Implementation

Here is a brief overview of our current implementation:

  • We are using Prism.js for syntax highlighting.
  • We have a button for copying code snippets, but it doesn't seem to work as expected.
  • We have attempted to make the design responsive, but there are still issues on mobile devices.

Specific Issues

  1. Syntax Highlighting:

    • Prism.js is included, but code snippets are not being highlighted as expected.
    • We need help ensuring that all code blocks are properly highlighted.

  2. Copy to Clipboard:

    • The "Copy" button is present, but clicking it does not copy the code snippet to the clipboard.
    • We need a reliable method to copy code snippets to the clipboard on both desktop and mobile browsers.

  3. Responsive Design:

    • The current design does not render well on mobile devices.
    • We need help optimizing the layout and styling to ensure a good user experience on all screen sizes.

Code Snippets

Here are some relevant parts of our code:

app.py

def convert_md_to_html(md_text, light_mode=True):
    html = markdown.markdown(md_text, extensions=['fenced_code', 'tables', 'toc', 'footnotes', 'attr_list', 'md_in_html'])
    soup = BeautifulSoup(html, 'lxml')

    for code in soup.find_all('code'):
        parent = code.parent
        if parent.name == 'pre':
            language = code.get('class', [''])[0].replace('language-', '') or 'text'
            lexer = get_lexer_by_name(language, stripall=True)
            formatter = HtmlFormatter(style='default' if light_mode else 'monokai')
            highlighted_code = highlight(code.string, lexer, formatter)
            code.replace_with(BeautifulSoup(highlighted_code, 'lxml'))

            copy_button_html = f'''
            <div class="code-header">
                <span class="language-label">{language}</span>
                <button class="copy-button" onclick="copyToClipboard(this)">
                    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon">
                        <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path>
                        <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
                    </svg>
                </button>
            </div>
            '''
            parent.insert_before(BeautifulSoup(copy_button_html, 'lxml'))

    return soup.prettify()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PySensei: Python Learning Assistant</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" id="prism-theme">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=SF+Pro+Text:wght@400;600&display=swap');
        
        /* Styles for dark/light mode, layout, and responsiveness */
        /* ... */
    </style>
</head>
<body>
    <!-- Sidebar and Chat Container -->
    <!-- ... -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-python.min.js"></script>
    <script>
        function copyToClipboard(button) {
            const codeBlock = button.parentElement.nextElementSibling.querySelector('code');
            const textArea = document.createElement('textarea');
            textArea.value = codeBlock.textContent;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            button.textContent = 'Copied!';
            setTimeout(() => {
                button.textContent = 'Copy';
            }, 2000);
        }

        // Script to handle dark/light mode and other functionalities
        // ...
    </script>
</body>
</html>

How You Can Help

  1. Syntax Highlighting:

    • Ensure that all code blocks are properly highlighted using Prism.js.
    • Verify that the highlighted code is displayed correctly in both light and dark modes.

  2. Copy to Clipboard:

    • Fix the copyToClipboard function to reliably copy code snippets to the clipboard.
    • Ensure that the functionality works across different browsers and devices.

  3. Responsive Design:

    • Improve the layout and styling to ensure a good user experience on all screen sizes.
    • Test the application on various devices and browsers to identify and fix any issues.

Any help or suggestions would be greatly appreciated. Thank you in advance for your contributions!

Best regards,
Zigao Wang

Generated by ChatGPT, reviewed by Zigao Wang
@ZigaoWang ZigaoWang pinned this issue Jul 15, 2024
@ZigaoWang ZigaoWang added the help wanted Extra attention is needed label Jul 15, 2024
@ZigaoWang ZigaoWang changed the title Need Help with Syntax Highlighting, Copy to Clipboard, and Responsive Design Features Need Help with Syntax Highlighting and Responsive Design Features Jul 15, 2024
@ZigaoWang
Copy link
Member Author

Announcement: Copy Button Issue Fixed!

Dear PySensei Users,

We are excited to announce that the issue with the "Copy" button for code snippets has been resolved! 🎉

What's Fixed:

  • Copy to Clipboard: The "Copy" button now reliably copies code snippets to your clipboard with a single click. This functionality works seamlessly across different browsers and devices, ensuring a smooth experience for all users.

How It Works:

  1. Highlighting Code: Simply click the "Copy" button located above any code snippet.
  2. Clipboard Confirmation: Once clicked, the button will temporarily change to "Copied!" to confirm that the code has been successfully copied to your clipboard.

We appreciate your patience and feedback as we continue to improve PySensei. Your support helps us make the platform better every day.

As always, if you encounter any issues or have suggestions for further improvements, please don't hesitate to reach out.

Happy coding!

Best regards,
Zigao Wang

Generated by ChatGPT, reviewed by Zigao Wang

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ZigaoWang