BeautiCode

BeautiCode

Published 438
By Dipesh Khanal 3 min read
View Project

BeautiCode
BeautiCode is a lightweight JavaScript library designed to beautify and structure your code snippets with stunning visuals. This documentation will guide you on how to integrate BeautiCode into your HTML projects using the provided CDN links.

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>

BeautiCode Example
Support

For questions, issues, or contributions, please visit the Github Repository.

This post is licensed under CC BY 4.0 by the author.