If you have blog and that blog focus on programming language then you need some plugin to add your code in that post so that your code look as same as they look in your code editor with proper color and format etc. , but plugin slow down your site because they contain more javascript files and we all know the speed issue of wordpress. So i find a very good and relevant solution. Now in am not using any of code viewer plugin as of now in my posts.

Step 1. Login to your github account.

Step 2. In top navigation bar click on Gist.

Step 3. Name your gist or name as same as your file name and paste your code inside it. Save your gist as Public Gist so it can access any where.

Step 4. Now once you save your gist copy the URL of that Gist from address bar of browser and paste it into your wordpress post.

Sample Preview


<html>
<head>
<title>Send Data to Server Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="">
<form ng-controller="FrmController">
<ul>
<li class="err" ng-repeat="error in errors"> {{ error}} </li>
</ul>
<ul>
<li class="info" ng-repeat="msg in msgs"> {{ msg}} </li>
</ul>
<h2>Sigup Form</h2>
<div>
<label>Name</label>
<input type="text" ng-model="username" placeholder="User Name" style='margin-left: 22px;'>
</div>
<div>
<label>Email</label>
<input type="text" ng-model="useremail" placeholder="Email" style='margin-left: 22px;'>
</div>
<div>
<label>Password</label>
<input type="password" ng-model="userpassword" placeholder="Password">
</div>
<button ng-click='SignUp();' style='margin-left: 63px;margin-top:10px'>SignUp</button>
</form>
<script type="text/javascript">
function FrmController($scope, $http) {
$scope.errors = [];
$scope.msgs = [];
$scope.SignUp = function() {
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$http.post('post_es.php', {'uname': $scope.username, 'pswd': $scope.userpassword, 'email': $scope.useremail}
).success(function(data, status, headers, config) {
if (data.msg != '')
{
$scope.msgs.push(data.msg);
}
else
{
$scope.errors.push(data.error);
}
}).error(function(data, status) { // called asynchronously if an error occurs
// or server returns response with an error status.
$scope.errors.push(status);
});
}
}
</script>
</body>
</html>

view raw

mySampleCode.html

hosted with ❤ by GitHub

🙂