Help converting a codemirror side-by-side diff example to an AnyWidget #801

habemus-papadum · 2025-02-18T14:08:16Z

habemus-papadum
Feb 18, 2025

Hello,
I would like to create an AnyWidget that shows the diff of two code snippets using CodeMirror. A standalone html is included below.

I don't think CodeMirror uses esm, but does use custom css, and many of the addons needed seem to rely on global variables (attached to window). My javascript, modules, bundling abilities are rusty so I am not able to assess how difficult it will be to make this work with AnyWidget. Would anyone be able to to provide guidance about next steps or feasibility? If bundling is required, then as simple as possible (es-build?) would be great.

Thanks! nehal

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CodeMirror Diff Example</title>

  <!-- CodeMirror core and merge addon CSS -->

 <!--**************************************************************************-->
 <!--How do I do the below in AnyWidget?-->
 <!--**************************************************************************-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/addon/merge/merge.min.css">


  <style>
    /* Optional: make CodeMirror editors fill the container and add a border */
    #diffView { height: auto; }
    .CodeMirror { width: 100%; border: 1px solid #ccc; }
  </style>
</head>
<body>
  <h2>Python Code Diff (Side-by-Side)</h2>
  <div id="diffView"></div>

  <!-- Load CodeMirror library and necessary addons/modes from CDN -->
 
 <!--**************************************************************************-->
 <!--How do I do the below in AnyWidget?-->
 <!--**************************************************************************-->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/merge/merge.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/python/python.min.js"></script>

  <script>
    // Define two Python code snippets to compare
    var code1 = `def greet(name):
    print("Hello, " + name + "!")
    
    asdsfdsf
    dsfsdf

    return 90
    `;  // original code (left side)
    var code2 = `def greet(name):
    print(f"Hello, \${name}!")

    asdsfdsf
    dsfsdf


    return 42`;                     // modified code (right side)

    // Initialize the CodeMirror MergeView for a two-way diff
    var target = document.getElementById("diffView");
    CodeMirror.MergeView(target, {
      value: code2,
      origLeft: code1,
      mode: "text/x-python",        // Python syntax highlighting
      lineNumbers: true,
      readOnly: true,               // make both sides read-only (diff view only)
      showDifferences: true,        // highlight the differences
      connect: "align",             // align changed lines side-by-side
      revertButtons: false, 
      highlightDifferences: true,
      collapseIdentical: false          // disable merge revert buttons (view-only mode)
    });
  </script>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Help converting a codemirror side-by-side diff example to an AnyWidget #801

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Help converting a codemirror side-by-side diff example to an AnyWidget #801

Uh oh!

habemus-papadum Feb 18, 2025

Replies: 0 comments

habemus-papadum
Feb 18, 2025