While looking at my backlinks today, I noticed a site in French had linked to my post about making photo galleries. He mentioned that the Google Translate wasn’t great. I took a look, and while I don’t know how good the text translation was, I did notice that Google strangely tried to translate the code as well, thus screwing it all up.

A quick search revealed that all one had to do was to add the “notranslate” class to any wrapping object to prevent its contents from being translated.

Now, I use the Syntax Highligher Evolved plugin to display code on my site (although I use an older version because I like the look and functionality of it better than the latest version). So I edited the plugin and found where it inserts the PRE tag, and added the notranslate class to it. And voila, now my code doesn’t get translated anymore.

Just a helpful tip for anybody who posts code on their sites.

Shortlink:

9 Comments

  1. Thank you,
    from a french.

  2. Thanks for sharing this, Otto.
    I would share a tip for adding the class “notranslate” to some elements via jQuery.

    Let’s say we want to add this class to these “not-to-be-translated” elements: code, pre and any element with “.code” class.
    Let’s start.

    1. Add these lines to your functions.php file:

    wp_register_script( 'googlenotranslate', get_stylesheet_directory_uri() . '/js/google_no_translate.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'googlenotranslate' );

    2. Create a new file and paste this:

    jQuery(document).ready(function($){
    	$("pre").addClass('notranslate');   // Targets PRE elements
    	$("code").addClass('notranslate');  // Targets CODE elements
    	$(".code").addClass('notranslate'); // Targets ANY element with .code class
    	// Add other elements or class or ID here
    });

    3. Save this file with the name “google_no_translate.js” and put it in a subdirectory “js” of your theme directory.

    You’re done.

    Obviously, if you’re using a custom plugin for all your custom functions, you’ll modify that file instead of the functions.php file. This will preserve all your custom features, even if you’ll change your existing theme.

    I’m not a jQuery expert, so I wonder if those three lines with ‘addClass’ could be written in one line only.

    • I kinda doubt that would actually work. I don’t think Google is doing the translation bit after processing the Javascript. I think it’s reading the actual HTML and modifying it before that happens.

      • Otto, I can assure you that it works well! :)
        So this means that Google process the page after the javascript has made those changes.

        OT
        FYI, I didn’t receive any email from your subcription manager. I checked my spam box and has no email from your domain.

    • I tried to make my own plugin consisting only both code above. Then I noticed that javascript was added at the bottom of my site. But, all pre and code are remain changed by google translator. (sorry for my bad english)

  3. Actually Philippe Durand, the author of the post in question, said that the automatic translation by Google was NOT bad. ;) He also mentions your blog as indispensable for people interested in WordPress …

  4. Please upgrade to the latest version of my plugin and then visit it’s settings page. It allows you to select which version of the Javascript highlighting package you want to use, either v2.x (the one you’re using now) or v3.x (the one you don’t like). The plugin has received new features and bug fixes in the versions since the one you’re using now. ;)

    Also I’ll add this to my plugin. Thanks for the tip!

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Need to post PHP code? Wrap it in [php] and [/php] tags.