I have an angularjs app for students to learn it includes so many html pre tags and code snippets in it. It have highlight js but some of the syntaxes aren't showing exact colours. but i have added window.onload function in one of the usecases and it works, properly. the thing i want ; is to apply it globally on all pre tags but it didn't work with jquery code i've written. to more reference I'm adding both codes and image here

working model

on other use cases

code i've added which giving result

window.onload = function() {
                var aCodes = document.getElementsByTagName('pre');
                for (var i=0; i < aCodes.length; i++) {
                    hljs.highlightBlock(aCodes[i]);
                }
            };

code i've tried (if it works i'll make it global)

$("pre").on("load", function() {
                setTimeout(function () {
                    var aCodes = document.getElementsByTagName('pre');
                    for (var i=0; i < aCodes.length; i++) {
                        hljs.highlightBlock(aCodes[i]);
                    }
                },1000)
            })

what i'm missing? is there any other ways to solve this