شرح اضافة صندوق اكواد الى مدونة بلوجر بطريق سهلة و بسيطة

إضافة كود لبلوجر هو أحيانا يكون صعب لأنه ببساطة يمكن أن يختلط بالصفحة ، أو أن يكون الكود طويلاً فلا يستطيع الزائر نسخه بسهولة ، هنا تأتي فائدة صندوق الأكواد أو syntax highlighter وهو الذي تضع فيه الأكواد سواء كانت HTML , CSS , JAVASCRIPT , PHP , C++ , XML .

شرح التركيب

الطريقة سهلة جدا كل ما عليك هو إنشاء موضوع جديد ثم التنقل الى قسم HTML كما هو مبين في الصورة:

ضع هذا الكود في الأسفل:

<style>textarea { height:auto; color:black; font-weight:400; font-size:15px; font-family:'Ubuntu', Helvetica, Arial, sans-serif; width:100%; background:#D3D3D3; border-radius:3px; line-height:2em; border:none; box-shadow:0px 0px 5px 1px rgba(0,0,0,0.1); padding:30px; -webkit-transition: height 2s ease; -moz-transition: height 2s ease; -ms-transition: height 2s ease; -o-transition: height 2s ease; transition: height 2s ease; } * { -webkit-font-smoothing:antialiased !important; } </style><link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400" rel="stylesheet" type="text/css"></link><script type="text/javascript"> var app = angular.module('myApp', []); app.controller('AppCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) { // Load the data $http.get('http://www.corsproxy.com/loripsum.net/api/plaintext').then(function (res) { $scope.loremIpsum = res.data; $timeout(expand, 0); }); $scope.autoExpand = function(e) { var element = typeof e === 'object' ? e.target : document.getElementById(e); var scrollHeight = element.scrollHeight -60; // replace 60 by the sum of padding-top and padding-bottom element.style.height = scrollHeight + "px"; }; function expand() { $scope.autoExpand('TextArea'); } }]); </script>

الأن لإستخدام صندوق الأكواد يمكن إستعمال الكود التالي:

<div ng-app="myApp"><div ng-controller="AppCtrl" align="center"><textarea id="TextArea" ng-model="loremIpsum" ng-keyup="autoExpand($event)" placeholder="" dir="ltr"> ضع الكود هنا </textarea> </div> </div>