Monday, December 30, 2024

Prevent Chrome's Translation Feature from Reformatting Code Blocks

Chrome Browser annoyingly reformats code blocks occasionally when using the translate feature. For example, if you translate a Chinese web page to English—if there are code blocks, it may also parse and reformat them, making them harder to read. Here's a workaround via Chrome DevTools Console. Run this before translating a web page:

// browser console hack to prevent chrome from mucking  
// with code blocks whenever a page is translated, 
// e.g. translating a chinese page to english

document.querySelectorAll('pre, code').forEach(block => {
  block.style.whiteSpace = 'pre-wrap';
  block.setAttribute('translate', 'no');
});

No comments:

Post a Comment