This bookmarklet is designed to re-inject rules for nested code blocks into an LLM prompt at the moment they are most likely to be forgotten. This bookmarklet is specifically designed for ChatGPT. The JavaScript source code shown below is the pre–one-liner version of the bookmarklet introduced in the previous article, “When LLM Output Breaks Nested Markdown Code Blocks, and How Indented Blocks + Bookmarklets Stabilize Them.”
Since bookmarklets must ultimately be registered as URLs, the code needs to be converted into a one-liner for actual use. However, for readability, the uncompressed version is shown here.
Both Japanese and English versions are provided below, but the only difference between them is the rule text (prompt) injected into the input field.
javascript:(function(){
const p = document.querySelector("#prompt-textarea p");
if (!p) return;
p.textContent =
"## 入れ子になったコードブロックに関する規則\n" +
"フェンスドコードブロック内では、インデント式でコードを表示すること。\n\n" +
p.textContent ;
p.dispatchEvent(new InputEvent("input", { bubbles: true }));
})();
JS source code of the bookmarklet before making it a one-liner. (Japanese version)
javascript:(function(){
const p = document.querySelector("#prompt-textarea p");
if (!p) return;
const rule =
"## Rules for nested code blocks\n" +
"Inside a fenced code block, display any inner code using the indented style (4 spaces). " +
"Do not use fenced code blocks inside another fenced code block.\n\n";
p.textContent = rule + p.textContent;
p.dispatchEvent(new InputEvent("input", { bubbles: true }));
})();
JS source code of the bookmarklet before making it a one-liner.
What this bookmarklet does is very simple:
it locates ChatGPT’s input field and prepends a rule instructing the model to use indented code blocks inside nested code blocks.
- Locate the text input element
const p = document.querySelector("#prompt-textarea p"); - Exit if the input field is not found
if (!p) return; - Store the rule text as a string
const rule =...... - Prepend the rule to the existing prompt
p.textContent = rule + p.textContent; - Notify the browser that the input content has changed
p.dispatchEvent(new InputEvent("input", { bubbles: true }));
This bookmarklet intentionally does not include an automatic send feature.
This is based on the assumption that users want to visually confirm the injected prompt before sending it.
When converting the code into a one-liner, the author often uses online Bookmarklet Maker tools.
Bookmarklet English Version link: 4spCB_en
One-liner code is following;
javascript:(function()%7Bjavascript%3A(function()%7B%0A const p %3D document.querySelector("%23prompt-textarea p")%3B%0A if (!p) return%3B%0A%0A const rule %3D%0A "%23%23 Rules for nested code blocks%5Cn" %2B%0A "Inside a fenced code block%2C display any inner code using the indented style (4 spaces). " %2B%0A "Do not use fenced code blocks inside another fenced code block.%5Cn%5Cn"%3B%0A%0A p.textContent %3D rule %2B p.textContent%3B%0A p.dispatchEvent(new InputEvent("input"%2C %7B bubbles%3A true %7D))%3B%0A%7D)()%3B%7D)()%3B
Notes / Disclaimer
- Use this bookmarklet at your own risk. No warranties are provided.
- Its behavior may vary depending on the environment or browser.
- If the web UI changes, the selector used to locate the input field may need to be updated.
- You are free to modify this code for personal use.
- If you redistribute it, a reference to this site would be appreciated.
For those who wish to add automatic sending: you can locate the send button using “document.querySelector('[data-testid="send-button"]')” and programmatically trigger a click event.
Just so you know, the send button does not appear when the input field is empty.
If you choose to experiment with this, please review the relevant terms of service and proceed at your own risk.
