BeautiCode
Getting Started
To get started with BeautiCode, follow these simple steps to include the necessary CSS and JavaScript files in your HTML.
1. Include BeautiCode CSS And Javascript
Add the following <link> tag in the <head> section of your HTML file to include the BeautiCode stylesheet:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.khanaldipesh.com.np/BeautiCode/index.css">
</head>
<body>
<!-- Your content goes here -->
<script src="https://cdn.khanaldipesh.com.np/BeautiCode/index.js"></script>
</body>
</html>3. Structure Your Code Snippets
To beautify your code snippets, wrap your code within <pre> and <code> tags as shown below:
<pre><code>composer require dipesh79/laravel-phonepe</code></pre>
4. BeautiCode in Action
Once you include the above links and structure your code snippets, BeautiCode will automatically apply beautiful styling and formatting to your code blocks when the page loads.
Copy to Clipboard Feature
BeautiCode also adds a "Copy to Clipboard" button at the top-right corner of each code block, allowing users to easily copy the code. This feature is automatically enabled, and no additional configuration is required.
Customization
BeautiCode comes with predefined styles and features that should meet most needs out of the box. However, if you need further customization:
- Themes: Customize the appearance by overriding specific CSS classes in your project.
- Copy Button Icon: Customize the "Copy to Clipboard" button by modifying the CSS for the .cb-copy-btn class.
Example
Here’s a complete example of an HTML file using BeautiCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BeautiCode Example</title>
<link rel="stylesheet" href="https://cdn.khanaldipesh.com.np/BeautiCode/index.css">
</head>
<body>
<h1>Welcome to BeautiCode</h1>
<pre><code>
const greeting = "Hello, World!";
console.log(greeting);
</code></pre>
<script src="https://cdn.khanaldipesh.com.np/BeautiCode/index.js"></script>
</body>
</html>
Support
For questions, issues, or contributions, please visit the Github Repository.