feat: improve stylization of code blocks #21

New Issue

2025-11-11T14:02:18-06:00

GiteaMirror commented

2025-11-11 14:02:18 -06:00

Originally created by @florencekl on GitHub (Nov 4, 2023).

Originally assigned to: @tjbck on GitHub.

Is your feature request related to a problem? Please describe.
Currently the Copy Code button below the code block can be unintuitive to find.

Describe the solution you'd like
ChatGPT Style code blocks, with the top left declaring the language and the top right having a copy code button.

Before Click:

After Click:

Additional context

This Feature would improve readability and usablity of the interaction in a ChatGPT Style UI (which is what most user are most likely already used to)

Here is a bare codepen mockup of how this could work (with hardcoded css styling because i was lazy and unsure what your current exact styling practices are):

Code

function copyCode(text, button) {
  navigator.clipboard.writeText(text).then(() => {
    const originalText = button.textContent;
    button.textContent = 'Copied!';
    setTimeout(() => {
      button.textContent = originalText;
    }, 1000);
  }).catch((error) => {
    alert(`Copy failed: ${error}`);
  });
}


 function transformCodeBlocks() {
  let blocks = document.querySelectorAll('pre');
  blocks.forEach((block) => {
    let code = block.querySelector('code');
    let text = code.innerText;

    let parentDiv = document.createElement('div');
    parentDiv.style.backgroundColor = '#343541';
    parentDiv.style.overflowX = 'auto';
    parentDiv.style.display = 'flex';
    parentDiv.style.flexDirection = 'column';
    parentDiv.style.borderRadius = '8px'

    let codeDiv = document.createElement('div');
    codeDiv.style.display = 'flex';
    codeDiv.style.justifyContent = 'space-between';
    codeDiv.style.alignItems = 'center';

    let langDiv = document.createElement('div');
    langDiv.textContent = code.className;
    langDiv.style.color = 'white';
    langDiv.style.margin = '8px';

    let button = document.createElement('button');
    button.textContent = 'Copy Code';
    button.style.background = 'none';
    button.style.border = 'none';
    button.style.margin = '8px';
    button.style.cursor = 'pointer';
    button.style.color = '#ddd';
    button.addEventListener('click', () => copyCode(text, button));

    codeDiv.appendChild(langDiv);
    codeDiv.appendChild(button);

    let pre = document.createElement('pre');
    pre.textContent = text;
    pre.style.margin = '0px';
    pre.style.padding = '8px'
    pre.style.backgroundColor = 'black';
    pre.style.color = 'white';

    parentDiv.appendChild(codeDiv);
    parentDiv.appendChild(pre);

    block.parentNode.replaceChild(parentDiv, block);
  });
}

transformCodeBlocks();

Originally created by @florencekl on GitHub (Nov 4, 2023). Originally assigned to: @tjbck on GitHub. **Is your feature request related to a problem? Please describe.** Currently the Copy Code button below the code block can be unintuitive to find. **Describe the solution you'd like** ChatGPT Style code blocks, with the top left declaring the language and the top right having a copy code button. Before Click: ![image](https://github.com/ollama-webui/ollama-webui/assets/59734957/bd0c96e4-6d79-499c-84b3-9238e23c2845) After Click: ![image](https://github.com/ollama-webui/ollama-webui/assets/59734957/2ceeaa3d-25fc-4fff-b724-674900a9a872) **Additional context** This Feature would improve readability and usablity of the interaction in a ChatGPT Style UI (which is what most user are most likely already used to) Here is a bare [codepen mockup](https://codepen.io/pydes/pen/GRzNvJv) of how this could work (with hardcoded css styling because i was lazy and unsure what your current exact styling practices are): ![image](https://github.com/ollama-webui/ollama-webui/assets/59734957/9b1ce434-ddbb-45fc-b0e3-e09733a9c0a9) <details> <summary>Code</summary> ``` function copyCode(text, button) { navigator.clipboard.writeText(text).then(() => { const originalText = button.textContent; button.textContent = 'Copied!'; setTimeout(() => { button.textContent = originalText; }, 1000); }).catch((error) => { alert(`Copy failed: ${error}`); }); } function transformCodeBlocks() { let blocks = document.querySelectorAll('pre'); blocks.forEach((block) => { let code = block.querySelector('code'); let text = code.innerText; let parentDiv = document.createElement('div'); parentDiv.style.backgroundColor = '#343541'; parentDiv.style.overflowX = 'auto'; parentDiv.style.display = 'flex'; parentDiv.style.flexDirection = 'column'; parentDiv.style.borderRadius = '8px' let codeDiv = document.createElement('div'); codeDiv.style.display = 'flex'; codeDiv.style.justifyContent = 'space-between'; codeDiv.style.alignItems = 'center'; let langDiv = document.createElement('div'); langDiv.textContent = code.className; langDiv.style.color = 'white'; langDiv.style.margin = '8px'; let button = document.createElement('button'); button.textContent = 'Copy Code'; button.style.background = 'none'; button.style.border = 'none'; button.style.margin = '8px'; button.style.cursor = 'pointer'; button.style.color = '#ddd'; button.addEventListener('click', () => copyCode(text, button)); codeDiv.appendChild(langDiv); codeDiv.appendChild(button); let pre = document.createElement('pre'); pre.textContent = text; pre.style.margin = '0px'; pre.style.padding = '8px' pre.style.backgroundColor = 'black'; pre.style.color = 'white'; parentDiv.appendChild(codeDiv); parentDiv.appendChild(pre); block.parentNode.replaceChild(parentDiv, block); }); } transformCodeBlocks(); ``` </details>

GiteaMirror closed this issue

2025-11-11 14:02:18 -06:00

GiteaMirror commented

2025-11-11 14:02:18 -06:00

@tjbck commented on GitHub (Nov 5, 2023):

Hi, Just been implemented with #57! Thanks.

@tjbck commented on GitHub (Nov 5, 2023): Hi, Just been implemented with #57! Thanks.