Wie kann ich Google Translate zwingen, Text zwischen den Tags <code.....> und </code> auf meiner Webseite zu übersetzen? ⇐ HTML

[Anonymous]

Wie erzwinge ich, dass Google Translate Text innerhalb von

Code: Select all

-Tags auf meiner Webseite übersetzt?
Ich habe online gelesen, dass das

Code: Select all

-Tag durch ein  span.setAttribute(attr.name, attr.value));
span.innerHTML = code.innerHTML;
// Insert new span before the code and remove the code
code.parentNode.insertBefore(span, code);
code.parentNode.removeChild(code);
});
}

// Function to revert   back to 
function revertSpanToCode() {
console.log("Reverting span to code...");
const spans = document.querySelectorAll('span');
spans.forEach(span => {
// Ensure we only target spans that were part of our replacement logic if possible,
// or ensure no other spans on the page are accidentally affected.
// A better approach might be to add a specific class during the initial replacement.

// For this general example, we assume we want to revert all spans back to codes (which might be too broad).
// A safer way is using a specific marker class or ID.
// Assuming we add a class 'translated-span' during replacement:
if (span.classList.contains('translated-span')) {
const code = document.createElement('code');
Array.from(span.attributes).forEach(attr => code.setAttribute(attr.name, attr.value));
code.innerHTML = span.innerHTML;
span.parentNode.insertBefore(code, span);
span.parentNode.removeChild(span);
}
});
}

// Use MutationObserver to detect Google Translate completion
const observerCallback = (mutationsList, observer) => {
const htmlEl = document.documentElement;
const isTranslated = htmlEl.classList.contains('translated-ltr') || htmlEl.classList.contains('translated-rtl');

if (isTranslated) {
// Page has been translated
console.log("Google Translate detected. Applying span replacements.");
replaceCodeWithSpan();
// You might want to disconnect the observer once done if you don't need further dynamic updates
// observer.disconnect();
} else {
// Translation was likely reverted to original language
console.log("Google Translate reverted or not active. Reverting code replacements if any.");
revertSpanToCode();
}
};

// Configuration for the observer: watch for attribute changes on the  element
const observerConfig = { attributes: true, attributeFilter: ['class'], childList: false, characterData: false };
const observer = new MutationObserver(observerCallback);

// --- Your existing Google Translate Element initialization code should be here ---
// This part should be after the definition of the functions above.
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', // Set your original page language
layout: google.translate.TranslateElement.InlineLayout.VERTICAL // Change this line
}, 'google_translate_element');
}
// --------------------------------------------------------------------------------

// Start observing the  element for class changes (which the translator does)
observer.observe(document.documentElement, observerConfig);