This tool is a personal utility for quickly generating code boxes in a specific format, making it particularly helpful for individuals who use Prism.js for syntax highlighting and want an efficient way to create code boxes. Here's a description of the tool and how to use it:
Tool Description:
This personal tool simplifies the process of generating code boxes formatted for use with Prism.js.
Best part of this tool also is that You can paste raw Code and while generating, your code would be parsed. Read more on parse code and why it matters for your code to be parsed
Following, it includes a "Copy" button alongside the code snippet, making it easy for users to copy code snippets and embed them into websites or blogs with syntax highlighting provided by Prism.js. Especially blogger blogs and site users.
To utilize this tool effectively, users should ensure they have already installed the necessary Prism.js script on their website or blog.
How to Use:
1. Prerequisites:
Ensure you have Prism.js installed and configured on your website or blog. here is how to install prism.js on your blog.
2. Input:
Paste or type your code snippet into the textarea provided.
3. Generate:
Click the "Generate" button to generate a code box with your code snippet. Don't worry your generated code is already parsed and you wont have problems with it.
4. Copy to Clipboard:
The generated code box includes a "Copy" button. Click this button to copy the code snippet, including the necessary formatting for Prism.js, and a parsed version of the code you pasted.
5. Embed in Your Content:
Paste the copied code snippet directly into your website or blog content where you want to showcase code examples. Prism.js will handle syntax highlighting based on the language specified in your code. Make sure it is pasted using the HTML Editor Console of your platform. Blogger users paste while on HTML format view.
6. Custom Styling (Optional):
The tool those not include any CSS for styling. You can customize the button's appearance to match your website's design.
or use mine
7. Enjoy:
Your code is now ready for display with Prism.js syntax highlighting, and users can easily copy it for reference or use.
By following these steps, users can streamline the process of adding code snippets to their websites or blogs while ensuring they maintain the benefits of syntax highlighting provided by Prism.js.