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.

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

Insert html, java, python, etc code with format like an IDE #1463

Open
manuelhz opened this issue Jun 5, 2024 · 0 comments
Open

Insert html, java, python, etc code with format like an IDE #1463

manuelhz opened this issue Jun 5, 2024 · 0 comments

Comments

@manuelhz
Copy link

manuelhz commented Jun 5, 2024

I would like to insert html, java, python, etc code with format like an IDE to explain code for example.
like this:

If we are building plain HTML Jquery web ui, then we can integrate the CDN as below:

<head> 
<title>Your Web Page</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trumbowyg@2.26.0/dist/ui/trumbowyg.min.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/trumbowyg@2.26.0/dist/trumbowyg.min.js"></script>
</head>

We can take the js and css files of the jquery rich text editor from github and add it our project.

Description

this id my base code:

<!DOCTYPE html>
<html lang="en">

<head>    
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trumbowyg@2.26.0/dist/ui/trumbowyg.min.css">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/trumbowyg@2.26.0/dist/trumbowyg.min.js"></script>
</head>
<script>
    $(document).ready(function() {
        $('#default-editor').trumbowyg();
        $('#reset-default-editor').click(function () {
         $('#default-editor').trumbowyg('empty');
         });
   });
        
</script> 


<body>
    <textarea id="default-editor"></textarea>
    <div id="default-editor"></div>
    <button id="reset-default-editor">Reset</button>

</body>
<footer>
    <!-- Import jQuery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>

    <!-- Import Trumbowyg -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.27.3/trumbowyg.min.js"></script>
</footer>
<script>
    $('#editor').trumbowyg();
</script>

</html>

How to reproduce?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant