I have asked ChatGPT to put all keywords for me in a text in ALL CAPS. I would like to get Anki to recognize ALLCAPS words strictly and color them in red, blue, and green alternating in repeat for more visual stimulation.
1 Like
I don’t know how to change the colors in order, but this code can be used to color bold text. I use it when editing text in Edit Field During Review and use “Ctrl+B” to highlight the bolded text.
.purple_bold b {
color: #aa00ff;
}
<div class="purple_bold ">
{{edit:Description}}
</div>
2 Likes
Thank you for the reply 
Problem is ChatGPT cannot highlight keywords in bold, at least not in a way that can be copied into Anki. Is there a way to do this with ALLCAPS words 
1 Like
I think it would be good to output in HTML using the ChatGPT prompts.
1 Like
I made ChatGPT make this javascript code but it still doesn’t work. I don’t know why
`
<script>
document.addEventListener("DOMContentLoaded", function() {
const text = document.body.innerHTML;
const regex = /\b[A-Z]{2,}\b/g;
const highlightedText = text.replace(regex, function(match) {
return <span class="all-caps">${match}</span>;
});
document.body.innerHTML = highlightedText;
});
</script>
.all-caps {
color: red; /* Change 'red' to any color you prefer */
}
1 Like
You need to have the Edit Field During Review addon to work
htps://ankiweb.net/shared/info/1020366288
if you are on the review screen, try this, the command is shift+c
<script>
$('[contenteditable=true]').keydown(function(e) {
if (e.shiftKey && e.keyCode == 67) { // Shift + C
e.preventDefault();
var selection = window.getSelection();
var selectedText = selection.toString();
if (selectedText.length > 0) {
var range = selection.getRangeAt(0);
var newNode = document.createElement("span");
newNode.textContent = selectedText.toUpperCase();
range.deleteContents();
range.insertNode(newNode);
}
}
});
</script>
red color and capital letters
if it is on the review screen, try this, the command is shift+c
<script>
$('[contenteditable=true]').keydown(function(e) {
if (e.shiftKey && e.keyCode == 67) { // Shift + C
e.preventDefault();
var selection = window.getSelection();
var selectedText = selection.toString();
if (selectedText.length > 0) {
var range = selection.getRangeAt(0);
var newNode = document.createElement("span");
newNode.style.color = "red";
newNode.textContent = selectedText.toUpperCase();
range.deleteContents();
range.insertNode(newNode);
}
}
});
</script>
alternate between the colors red, blue and green each time you press the command shift+c
<script>
$(document).ready(function() {
var colorIndex = 0;
var colors = ["red", "blue", "green"];
$('[contenteditable=true]').keydown(function(e) {
if (e.shiftKey && e.keyCode == 67) { // Shift + C
e.preventDefault();
var selection = window.getSelection();
var selectedText = selection.toString();
if (selectedText.length > 0) {
var range = selection.getRangeAt(0);
var newNode = document.createElement("span");
newNode.style.color = colors[colorIndex];
newNode.textContent = selectedText.toUpperCase();
range.deleteContents();
range.insertNode(newNode);
colorIndex = (colorIndex + 1) % colors.length; // Alterna entre as cores
}
}
});
});
</script>
I already have the addon on me and put this code into my front and back templates. it seems that it still refuses to work unless I did something wrong. Cant it just work by itself without me having to press a command button
Can you ask ChatGPT to output HTML?
What version do you use? What operating system?
I tested it on Windows 10 and Anki version 24.04 and it worked.
Windows 11, Anki 24.06.3
Here I inserted the code into the front template and back template as you made it
Me pressing Shift+C doesn’t do anything in the Reviewer
select the word and press shift+c
remembering that you have to have the Edit Field During Review addon to work
htps://ankiweb.net/shared/info/1020366288
and in the front field, if it is called front, above the script it has to be like this
{{edit:Front}}
Try the following:
Template
<script>
{
const colors = ["red", "blue", "green"];
// Words with all letters capitalized,
// except for words with only one letter, such as I.
const allCapsWordRegex = /\b[A-Z]{2,}\b/g;
let colorIndex = 0;
function containsAllCapsWords(str) {
return allCapsWordRegex.test(str);
}
function replacer(match) {
const color = colors[colorIndex % colors.length];
colorIndex++;
return `<span style="color: ${color};">${match}</span>`;
}
function colorizeAllCapsWords(text) {
return text.replace(allCapsWordRegex, replacer);
}
function maybeReplaceTextNode(node) {
if (containsAllCapsWords(node.textContent)) {
const newHtml = colorizeAllCapsWords(node.textContent);
const newNode = document.createElement("span");
newNode.innerHTML = newHtml;
node.parentNode.replaceChild(newNode, node);
}
}
const treeWalker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_TEXT,
(node) =>
["SCRIPT", "STYLE"].includes(node.parentNode.nodeName)
? NodeFilter.FILTER_REJECT
: NodeFilter.FILTER_ACCEPT,
);
while (treeWalker.nextNode()) {
maybeReplaceTextNode(treeWalker.currentNode);
}
}
</script>
Screenshot
2 Likes
50% of the words in the text are capitalized and randomly colored (green, blue or red)
where it says {{Frente}} you change it to the name of the field that is in your anki
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Texto Colorido</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.color1 { color: blue; }
.color2 { color: green; }
.color3 { color: red; }
.uppercase { text-transform: uppercase; }
</style>
</head>
<body>
<div id="content-area">
{{Frente}}
</div>
<script>
$(document).ready(function() {
var colors = ['color1', 'color2', 'color3'];
function getRandomColorClass() {
return colors[Math.floor(Math.random() * colors.length)];
}
function getRandomWords(text, count) {
var words = text.split(/\s+/);
var randomWords = [];
while (count > 0 && words.length > 0) {
var index = Math.floor(Math.random() * words.length);
var word = words.splice(index, 1)[0];
if (word) {
randomWords.push(word);
count--;
}
}
return randomWords;
}
function applyStyles() {
var $content = $('#content-area');
var htmlContent = $content.html();
var words = htmlContent.split(/\s+/);
var numberOfWordsToChange = Math.ceil(words.length * 0.50); // altera 50% das palavras
var randomWords = getRandomWords(htmlContent, numberOfWordsToChange);
randomWords.forEach(function(word) {
var regex = new RegExp('\\b(' + word + ')\\b', 'gi');
var colorClass = getRandomColorClass();
htmlContent = htmlContent.replace(regex, '<span class="' + colorClass + ' uppercase">$1</span>');
});
$content.html(htmlContent);
}
// Apply styles after content is loaded/rendered
applyStyles();
// If you want to reapply styles after content changes, you can use a MutationObserver or similar method
// For example, to reapply styles on content changes:
var observer = new MutationObserver(function() {
applyStyles();
});
observer.observe(document.getElementById('content-area'), { childList: true, subtree: true });
});
</script>
</body>
</html>
If none of this works, you can try this addon I made. It is on the editor screen. I added an option for capital letters, and it also has bold, green, blue and red colors.
With this addon you can add words or text and make it colorful (green, red, blue or highlighted), as well as bold.
Go to Edit (Ctrl+E) and add the word.
Once you add the word, set the color and save, it will be used for any card you edit. Just type the word in any field and press Ctrl+T or click the Update button.
1 Like
Oh great!! Though I really dont understand how this works exactly. Everything seems to be in Portuguese. Do I just type words in ALLCAPS and this changes to become fully coloured in the Reviewer automatically, so that every word in ALLCAPS is coloured in red for example
It’s in Portuguese, but I think it’s easy to understand.
You click on the “Editar (Ctrl+E)” button inside the editor, a dialog box will open and then you add the words or text you want by clicking on “Adicionar Texto” and then “Salvar”.
If you want to remove the text, select it and click on “Remover Texto” and then “Salvar”.
The “Ordenar texto” button means to put the text in alphabetical order and always remember to click on “Salvar” to save it.
The “MAIUSCULAS” button means to make the letters of the text capitalized, you select a word or text inside the dialog box and click on it and then “Salvar”.
The “negrito” button means to make the text bold.
The other buttons are colored: “preto” is black, “azul” is blue, “verde” is green, “vermelho” is red, “destaque” is highlighted and “remover destaque” is to remove highlight.
When you type a word or text that is inside the dialog box in the front, back or any other field and click the “update” button, it will be displayed as it is inside the dialog box.
For example: the word love is capitalized in the dialog box (LOVE), so if you type it in lowercase (love) in the front field and click update, it will be capitalized (LOVE).
This will apply to any card you add in the editor in the future.
When you add the card and review it, the word “love” will be capitalized, LOVE.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.