Skip to content

Instantly share code, notes, and snippets.

@zudsniper
Last active December 1, 2023 07:08
Show Gist options
  • Save zudsniper/4b24d53b39e1d1204e0d611a58ddd3e7 to your computer and use it in GitHub Desktop.
Save zudsniper/4b24d53b39e1d1204e0d611a58ddd3e7 to your computer and use it in GitHub Desktop.
🧹 Tampermonkey Userscript that Cleans ChatGPT weird Markdown to GH Markdown
// ==UserScript==
// @name CGPT Markdown Cleaner
// @namespace http://gh.zod.tf/
// @version 1.9.4
// @description Convert GPT Markdown to Standard GitHub Flavor Markdown on OpenAI Chat
// @author zudsniper
// @match https://chat.openai.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Style for the GUI
const guiStyle = `
#markdownConverterGui {
position: fixed;
top: 10px;
right: -360px; /* Width of the GUI + some extra space */
background-color: white;
padding: 10px;
z-index: 1000;
border: 1px solid #ddd;
transition: right 0.5s;
box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
font-size: 14px; /* Smaller font size */
}
#showHideButton {
position: fixed;
top: 15px;
right: 10px; /* Adjusted for padding */
width: 30px;
height: 30px;
background-color: #ddd;
border-radius: 15px 0 0 15px; /* Semi-circle on the left side */
text-align: center;
line-height: 30px;
cursor: pointer;
z-index: 1001;
transition: right 0.5s, opacity 0.5s; /* Transition for right position and opacity */
opacity: 0.5; /* Default opacity set to 50% */
}
#showHideButton:hover {
opacity: 1; /* Full opacity on hover */
}
#inputMarkdown, #outputMarkdown {
width: 300px;
height: 100px;
margin-bottom: 5px;
display: block;
border: 1px solid #ccc;
padding: 5px;
color: black; /* Ensure text is black */
caret-color: black; /* Ensure cursor is black */
}
#inputMarkdown:focus, #outputMarkdown:focus {
outline: none;
border-color: #4CAF50;
}
#convertButton {
background-color: #4CAF50; /* Green background */
color: white;
padding: 5px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
display: block;
margin: 10px auto;
}
#convertButton:hover {
background-color: #45a049;
}
#reformatTitlesLabel, #autoClipboardLabel {
display: block;
margin-top: 5px;
text-align: center;
color: black; /* Black color for checkbox label */
}
#reformatTitlesLabel label, #autoClipboardLabel label {
font-size: 12px; /* Smaller font size for the label */
}
#reformatTitles, #autoClipboardOption {
cursor: pointer;
margin-right: 5px;
vertical-align: middle;
}
input[type="checkbox"]:focus, input[type="radio"]:focus {
outline: none;
}
`;
// Adding style to the document
const styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = guiStyle;
document.head.appendChild(styleSheet);
// Create the GUI
const gui = document.createElement('div');
gui.id = 'markdownConverterGui';
gui.innerHTML = `
<textarea id="inputMarkdown" placeholder="Unprocessed Markdown"></textarea>
<textarea id="outputMarkdown" placeholder="Processed Markdown" readonly></textarea>
<button id="convertButton">Convert</button>
<div id="reformatTitlesLabel">
<label>
<input type="checkbox" id="reformatTitles" checked>
Reformat Titles
</label>
</div>
<div id="autoClipboardLabel">
<label>
<input type="checkbox" id="autoClipboardOption" checked>
Auto-clipboard
</label>
</div>
`;
document.body.appendChild(gui);
// Show/Hide button
const showHideButton = document.createElement('div');
showHideButton.id = 'showHideButton';
showHideButton.textContent = '≡';
document.body.appendChild(showHideButton);
// Toggle GUI visibility
showHideButton.onclick = function() {
const gui = document.getElementById('markdownConverterGui');
const isGuiVisible = gui.style.right === '0px';
gui.style.right = isGuiVisible ? `-${gui.offsetWidth + 10}px` : '0';
showHideButton.style.right = isGuiVisible ? '10px' : `${gui.offsetWidth}px`;
showHideButton.textContent = isGuiVisible ? '≡' : '<';
// Adjust for scrollbar if needed
const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
if (!isGuiVisible && scrollBarWidth > 0) {
showHideButton.style.right = `${gui.offsetWidth + scrollBarWidth}px`;
}
};
// Conversion function
function convertMarkdown() {
let inputText = document.getElementById('inputMarkdown').value;
// Convert inline math, ensuring no extra spaces are introduced
inputText = inputText.replace(/\\\((.*?)\\\)/g, (match, p1) => `$${p1.trim()}$`);
// Convert block LaTeX environments
inputText = inputText.replace(/\\\[([\s\S]*?)\\\]/gm, (match, p1) => `$$\n${p1}\n$$`);
// Optional conversion based on the checkbox
if (document.getElementById('reformatTitles').checked) {
inputText = inputText.replace(/\*\*(.*?)\*\*:/g, '<u>$1</u> =>');
}
document.getElementById('outputMarkdown').value = inputText;
// Auto-clipboard feature
if (document.getElementById('autoClipboardOption').checked) {
const outputMarkdown = document.getElementById('outputMarkdown');
outputMarkdown.select();
document.execCommand('copy');
}
}
// Event listener for the button
document.getElementById('convertButton').addEventListener('click', convertMarkdown);
// Initialize GUI position
const guiInitialWidth = gui.offsetWidth;
gui.style.right = `-${guiInitialWidth + 10}px`;
showHideButton.style.right = '10px';
// Placeholder focus management for inputMarkdown
const inputMarkdown = document.getElementById('inputMarkdown');
inputMarkdown.onfocus = function() {
this.placeholder = '';
};
inputMarkdown.onblur = function() {
if (this.value === '') {
this.placeholder = 'Unprocessed Markdown';
}
};
// Processed Markdown text click event
const outputMarkdown = document.getElementById('outputMarkdown');
outputMarkdown.onclick = function() {
this.select(); // Select all text
// Optionally copy to clipboard
if (document.getElementById('autoClipboardOption').checked) {
document.execCommand('copy');
}
};
// Auto-clipboard event listener for checkbox
document.getElementById('autoClipboardOption').addEventListener('change', function() {
// Logic to toggle auto-clipboard feature
});
})();
// ==UserScript==
// @name CGPT Markdown Cleaner
// @namespace http://gh.zod.tf/
// @version 1.7.1
// @description Convert GPT Markdown to Standard GitHub Flavor Markdown on OpenAI Chat
// @author zudsniper
// @match https://chat.openai.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Style for the GUI
const guiStyle = `
#markdownConverterGui {
position: fixed;
top: 10px;
right: -360px; /* Width of the GUI + some extra space */
background-color: white;
padding: 10px;
z-index: 1000;
border: 1px solid #ddd;
transition: right 0.5s;
box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
font-size: 14px; /* Smaller font size */
}
#showHideButton {
position: fixed;
top: 15px;
right: 10px; /* Adjusted for padding */
width: 30px;
height: 30px;
background-color: #ddd;
border-radius: 15px 0 0 15px; /* Semi-circle on the left side */
text-align: center;
line-height: 30px;
cursor: pointer;
z-index: 1001;
transition: right 0.5s;
}
#inputMarkdown, #outputMarkdown {
width: 300px;
height: 100px;
margin-bottom: 5px;
display: block;
border: 1px solid #ccc;
padding: 5px;
color: black; /* Ensure text is black */
caret-color: black; /* Ensure cursor is black */
}
#inputMarkdown:focus, #outputMarkdown:focus {
outline: none;
border-color: #4CAF50;
}
#convertButton {
background-color: #4CAF50; /* Green background */
color: white;
padding: 5px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
display: block;
margin: 10px auto;
}
#convertButton:hover {
background-color: #45a049;
}
#reformatTitlesLabel {
display: block;
margin-top: 5px;
text-align: center;
color: black; /* Black color for checkbox label */
}
#reformatTitlesLabel label {
font-size: 12px; /* Smaller font size for the label */
}
`;
// Adding style to the document
const styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = guiStyle;
document.head.appendChild(styleSheet);
// Create the GUI
const gui = document.createElement('div');
gui.id = 'markdownConverterGui';
gui.innerHTML = `
<textarea id="inputMarkdown" placeholder="Unprocessed Markdown"></textarea>
<textarea id="outputMarkdown" placeholder="Processed Markdown" readonly></textarea>
<button id="convertButton">Convert</button>
<div id="reformatTitlesLabel">
<label>
<input type="checkbox" id="reformatTitles" checked>
Reformat Titles
</label>
</div>
`;
document.body.appendChild(gui);
// Show/Hide button
const showHideButton = document.createElement('div');
showHideButton.id = 'showHideButton';
showHideButton.textContent = '≡';
document.body.appendChild(showHideButton);
// Toggle GUI visibility
showHideButton.onclick = function() {
const gui = document.getElementById('markdownConverterGui');
const isGuiVisible = gui.style.right === '0px';
gui.style.right = isGuiVisible ? `-${gui.offsetWidth + 10}px` : '0';
showHideButton.style.right = isGuiVisible ? '10px' : `${gui.offsetWidth}px`;
showHideButton.textContent = isGuiVisible ? '≡' : '<';
};
// Conversion function
function convertMarkdown() {
let inputText = document.getElementById('inputMarkdown').value;
inputText = inputText.replace(/\\\(( )?/g, '$')
.replace(/( )?\\\)/g, '$')
.replace(/\\\[\n?/g, '$$')
.replace(/\n?\\\]/g, '$$');
// Optional conversion based on the checkbox
if (document.getElementById('reformatTitles').checked) {
inputText = inputText.replace(/\*\*(.*?)\*\*:/g, '<u>$1</u> =>');
}
document.getElementById('outputMarkdown').value = inputText;
}
// Event listener for the button
document.getElementById('convertButton').addEventListener('click', convertMarkdown);
// Initialize GUI position
const guiInitialWidth = gui.offsetWidth;
gui.style.right = `-${guiInitialWidth + 10}px`;
showHideButton.style.right = '10px';
// Placeholder focus management for inputMarkdown
const inputMarkdown = document.getElementById('inputMarkdown');
inputMarkdown.onfocus = function() {
this.placeholder = '';
};
inputMarkdown.onblur = function() {
if (this.value === '') {
this.placeholder = 'Unprocessed Markdown';
}
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment