ماهو سبب تقرحات الفم

كيف اضافة صناديق اكواد بشكل احترافي
مرحبا متابعي مدونة ويب تيك جئتكم اليوم
بإضافة مميزة لأصحاب مدونات بلوجر وخصوصا لمحبي بلوجر يمكن مشاركة أكواد  بلوجر مع هذه الصناديق المميزة لوضع الاكواد فيها
لكي لااطيل عليكم

من لوحة التحكم >> قالب>> تحرير html
قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

]]></b:skin>

 واضف الكود التالي فوقه مباشرة

*,
*:after,
*:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-smooth: always;
}
body {
  font-family: open-sans, Arial, sans-serif;
  background-color: #71D4B7;
  font-size: 62.5%;
}
body label {
  background-color: white;
  color: #000;
  padding: 10px 15px;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 10px;
  box-shadow: 4px 3px 0px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
body label:hover {
  background-color: rgba(255, 255, 255, 0.75);
}
body label:hover ~ h1 {
  display: block;
}
body input {
  display: none;
}
body input:checked ~ h1 {
  display: block;
}
body input:checked ~ label {
  background-color: rgba(255, 255, 255, 0.75);
}
body h1 {
  display: none;
  font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
  font-size: 18px;
  color: #000;
  background-color: #fff;
  padding: 10px;
  position: absolute;
  left: 55px;
  top: 10px;
  box-shadow: 4px 3px 0px rgba(0, 0, 0, 0.15);
  z-index: 999;
}
body h1:hover {
  display: block;
}
body h1 a, body h1 a:visited, body h1 a:hover {
  color: #000;
}
.code-editor {
  width: 800px;
  margin: 20px auto;
}
.code-editor.fullscreen {
  width: calc(100% - 40px);
  position: fixed;
  height: calc(100% - 120px);
  margin: 20px;
}
.code-editor .controls {
  background-color: #E8ECEF;
  font-size: 10px;
  font-size: 1rem;
  display: block;
  padding: 15px;
  text-align: right;
  -webkit-border-top-left-radius: 6px;
  -ms-border-top-left-radius: 6px;
  -moz-border-top-left-radius: 6px;
  -o-border-top-left-radius: 6px;
  border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -ms-border-top-right-radius: 6px;
  -moz-border-top-right-radius: 6px;
  -o-border-top-right-radius: 6px;
  border-top-right-radius: 6px;
}
.code-editor .controls i {
  color: #BAC1C9;
  cursor: pointer;
  margin-left: 15px;
}
.code-editor .controls i:hover {
  color: #818e9c;
}
.code-editor .embed-nav {
  background-color: #384a56;
  padding: 15px;
}
.code-editor .embed-nav ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
.code-editor .embed-nav ul li {
  margin-right: 10px;
}
.code-editor .embed-nav ul li a {
  font-size: 8px;
  font-size: 0.8rem;
  color: #BAC1C9;
  padding: 5px 10px;
  -webkit-border-radius: 15px;
  -ms-border-radius: 15px;
  -moz-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  text-decoration: none;
}
.code-editor .embed-nav ul li a.active {
  background-color: #233038;
}
.code-editor .embed-nav .logo-wrap {
  display: none;
}
code[class*="language-"],
pre[class*="language-"] {
  color: #f8f8f2;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
  padding: 0 15px 15px 15px;
  overflow: auto;
  font-size: 10px;
  font-size: 1rem;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #4e606c;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #9cacb7;
}
.token.punctuation {
  color: #f8f8f2;
}
.namespace {
  opacity: .7;
}
.token.function {
  color: #F5755A;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol {
  color: #71D4B7;
}
.token.boolean,
.token.number {
  color: #ae81ff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
  color: #FC659A;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #EFB26E;
}
.token.atrule,
.token.attr-value {
  color: #e6db74;
}
.token.keyword {
  color: #66d9ef;
}
.token.regex,
.token.important {
  color: #fd971f;
}
.token.important {
  font-weight: bold;
}
.token.entity {
  cursor: help;
}
.token.deleted {
  color: red;
}
.token.inserted {
  color: green;
}
pre.line-numbers {
  position: relative;
  padding-left: 55px;
  counter-reset: linenumber;
}
pre.line-numbers > code {
  position: relative;
}
.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 22px;
  font-size: 100%;
  left: -100px;
  width: 40px;
  /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  color: #879BA6;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
}
.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right;
}

ابحث عن هذا الكود

 </body>

 واضف الكود التالي فوقه ان لم يعمل قم بتحويله من هنا

<script type='text/javascript'>
$(document).ready(function(){
// Fullscreen Functionality
// Put this together quickly so needs to be improved
$('.code-editor .fullscreen').on( "click", function() {
var windowHeight = $(window).height() - 132;
if($('.code-editor').hasClass('fullscreen')){
$('.code-editor').removeClass('fullscreen');
$(this).addClass('fa-expand').removeClass('fa-compress');
$('.code-editor pre').css({height: 'auto'});
} else {
$('.code-editor').addClass('fullscreen');
$(this).removeClass('fa-expand').addClass('fa-compress');
$('.code-editor pre').css({height: windowHeight});
}
});
// Accordion functionality
$('.code-editor .accordion').on( "click", function() {
$(this)
.toggleClass('fa-chevron-up')
.toggleClass('fa-chevron-down')
.parent().parent()
.children()
.not('.controls')
.slideToggle();
});
});
// Prism.js Plugin
//
// http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+php+scss+bash&plugins=line-numbers
//
//-------------------------------
self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));return a;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n)a[r]=n[r];return a},insertBefore:function(e,n,a,r){r=r||t.languages;var i=r[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in a)a.hasOwnProperty(s)&&(l[s]=a[s]);l[o]=i[o]}return r[e]=l},DFS:function(e,n){for(var a in e)n.call(e,a,e[a]),"Object"===t.util.type(e)&&t.languages.DFS(e[a],n)}},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),i=0;a=r[i++];)t.highlightElement(a,e===!0,n)},highlightElement:function(a,r,i){for(var l,o,s=a;s&&!e.test(s.className);)s=s.parentNode;if(s&&(l=(s.className.match(e)||[,""])[1],o=t.languages[l]),o){a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,s=a.parentNode,/pre/i.test(s.nodeName)&&(s.className=s.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var c=a.textContent;if(c){var g={element:a,language:l,grammar:o,code:c};if(t.hooks.run("before-highlight",g),r&&self.Worker){var u=new Worker(t.filename);u.onmessage=function(e){g.highlightedCode=n.stringify(JSON.parse(e.data),l),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(g.element),t.hooks.run("after-highlight",g)},u.postMessage(JSON.stringify({language:g.language,code:g.code}))}else g.highlightedCode=t.highlight(g.code,g.grammar,g.language),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(a),t.hooks.run("after-highlight",g)}}},highlight:function(e,a,r){var i=t.tokenize(e,a);return n.stringify(t.util.encode(i),r)},tokenize:function(e,n){var a=t.Token,r=[e],i=n.rest;if(i){for(var l in i)n[l]=i[l];delete n.rest}e:for(var l in n)if(n.hasOwnProperty(l)&&n[l]){var o=n[l];o="Array"===t.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var c=o[s],g=c.inside,u=!!c.lookbehind,f=0,h=c.alias;c=c.pattern||c;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){c.lastIndex=0;var m=c.exec(d);if(m){u&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+o+">"+i.content+"</"+i.tag+">"},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);;
Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&amp;/,"&"))});;
Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/gi},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/gi,inside:{tag:{pattern:/<style[\w\W]*?>|<\/style>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//g,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*?(\r?\n|$)/g,lookbehind:!0}],string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};;
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/gi,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});;
Prism.languages.php=Prism.languages.extend("clike",{keyword:/\b(and|or|xor|array|as|break|case|cfunction|class|const|continue|declare|default|die|do|else|elseif|enddeclare|endfor|endforeach|endif|endswitch|endwhile|extends|for|foreach|function|include|include_once|global|if|new|return|static|switch|use|require|require_once|var|while|abstract|interface|public|implements|private|protected|parent|throw|null|echo|print|trait|namespace|final|yield|goto|instanceof|finally|try|catch)\b/gi,constant:/\b[A-Z0-9_]{2,}\b/g,comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])(\/\/|#).*?(\r?\n|$))/g,lookbehind:!0}}),Prism.languages.insertBefore("php","keyword",{delimiter:/(\?>|<\?php|<\?)/gi,variable:/(\$\w+)\b/gi,"package":{pattern:/(\\|namespace\s+|use\s+)[\w\\]+/g,lookbehind:!0,inside:{punctuation:/\\/}}}),Prism.languages.insertBefore("php","operator",{property:{pattern:/(->)[\w]+/g,lookbehind:!0}}),Prism.languages.markup&&(Prism.hooks.add("before-highlight",function(e){"php"===e.language&&(e.tokenStack=[],e.backupCode=e.code,e.code=e.code.replace(/(?:<\?php|<\?)[\w\W]*?(?:\?>)/gi,function(n){return e.tokenStack.push(n),"{{{PHP"+e.tokenStack.length+"}}}"}))}),Prism.hooks.add("before-insert",function(e){"php"===e.language&&(e.code=e.backupCode,delete e.backupCode)}),Prism.hooks.add("after-highlight",function(e){if("php"===e.language){for(var n,a=0;n=e.tokenStack[a];a++)e.highlightedCode=e.highlightedCode.replace("{{{PHP"+(a+1)+"}}}",Prism.highlight(n,e.grammar,"php"));e.element.innerHTML=e.highlightedCode}}),Prism.hooks.add("wrap",function(e){"php"===e.language&&"markup"===e.type&&(e.content=e.content.replace(/(\{\{\{PHP[0-9]+\}\}\})/g,'<span class="token php">$1</span>'))}),Prism.languages.insertBefore("php","comment",{markup:{pattern:/<[^?]\/?(.*?)>/g,inside:Prism.languages.markup},php:/\{\{\{PHP[0-9]+\}\}\}/g}));;
Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm}),Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i}),Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i}),Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});;
Prism.languages.bash=Prism.languages.extend("clike",{comment:{pattern:/(^|[^"{\\])(#.*?(\r?\n|$))/g,lookbehind:!0},string:{pattern:/("|')(\\?[\s\S])*?\1/g,inside:{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^\}]+\})/g}},keyword:/\b(if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)\b/g}),Prism.languages.insertBefore("bash","keyword",{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^}]+\})/g}),Prism.languages.insertBefore("bash","comment",{important:/(^#!\s*\/bin\/bash)|(^#!\s*\/bin\/sh)/g});;
Prism.hooks.add("after-highlight",function(e){var n=e.element.parentNode;if(n&&/pre/i.test(n.nodeName)&&-1!==n.className.indexOf("line-numbers")){var t,a=1+e.code.split("\n").length;lines=new Array(a),lines=lines.join("<span></span>"),t=document.createElement("span"),t.className="line-numbers-rows",t.innerHTML=lines,n.hasAttribute("data-start")&&(n.style.counterReset="linenumber "+(parseInt(n.getAttribute("data-start"),10)-1)),e.element.appendChild(t)}});;
</script>

واخيرا هذا هو كود الاضافة تضعه في وضع html  بالمشاركة

<!--
Callum Silcock 2014
Flat Code Editor
Inspired by Dribbble Shot
https://dribbble.com/shots/1016617-Web-Development-Icon
-->
<head>
  <title>
    Flat Code Editor
  </title>
  <script src="https://use.edgefonts.net/open-sans:n4,i4,n7.js"></script>
</head>
<body>

  <!-- Pen Information -->

  <input id="info" name="info" type="checkbox" />
  <label for="info">i</label>
  <h1>
Inspired by <a href="https://dribbble.com/shots/1016617-Web-Development-Icon" target="blank">Chris Smith's dribble shot</a>
   <br />
  ~Callum Silcock 2014 | <a href="https://twitter.com/cub3" target="_blank">@Cub3</a></h1>
<!-- Code Editor -->

  <section class="code-editor">
    <div class="controls">
      <i class="fa fa-expand fullscreen"></i>
      <i class="fa fa-chevron-up accordion"></i>
    </div>
<div class="embed-nav">
      <ul>
<li>
          <a href="https://www.blogger.com/blogger.g?blogID=5216481504220808685#html-box" id="html-link">
            HTML
          </a>
        </li>
<li>
          <a class="active" href="https://www.blogger.com/blogger.g?blogID=5216481504220808685#css-box" id="css-link">
            SCSS
          </a>
        </li>
<li>
          <a href="https://www.blogger.com/blogger.g?blogID=5216481504220808685#js-box" id="js-link">
            JS
          </a>
        </li>
<li>
          <a href="https://www.blogger.com/blogger.g?blogID=5216481504220808685#result-box" id="result-link">
            Result
          </a>
        </li>
</ul>
<div class="logo-wrap">
        <a href="https://www.blogger.com/blogger.g?blogID=5216481504220808685#" target="_blank" title="Edit on CodePen">
          Edit on codepen
        </a>
      </div>
</div>
<pre class="line-numbers">
      <code class="language-scss">
ضع الكود هنا
      </code>
    </pre>
</section>
</body></div>

ملاحظة غيير فقط  ضع الكود هنا  بالكود الخاص بك