| Mohamed yasser |
05-19-2019 05:31 PM |
انشاء مربع الاكواد لمحرر ckeditor
السلام عليكم ورحمة الله وبركاته
رمضان كريم وكل سنه وانت طيبين
ازاي نستخدم محرر ckeditor علشان نعمل مربع اكواد بالشكل ده
https://3.top4top.net/p_1234vhx8m1.jpg
اول حاجه لازم تجيب اضافه
codesnippet
prism
من الاضافات وغالبا بتكون موجوده في المحرر الجديد لو مش موجوده حمله من الموقع ذي ماشرحت في الموضوع السابق
نيجي للعمل
اتحط الاضافات بعد ماتنزلهم لو مش عندك مع اتباع خطوات درس اضافات المحرر
شغل الصفحه
في الاستايل حط دول
كود PHP:
code[class*="language-"],pre{
color:white;
text-shadow:0 -.1em .2em black;
font-family:Monaco,Consolas,'Andale Mono','Ubuntu Mono',monospace;
direction:ltr;
text-align:left;
white-space:pre;
word-spacing:normal;
word-break:normal;
word-wrap: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
}
@media print{
code[class*="language-"],pre{
text-shadow:none
}
}
pre,:not(pre)>code[class*="language-"]{
background:hsl(30,20%,25%)
}
pre{
padding:1em;
margin:.5em 0;
overflow:auto;
border:.3em solid hsl(30,20%,40%);
border-radius:.5em;
box-shadow:1px 1px .5em black inset
}
:not(pre)>code[class*="language-"]{
padding:.15em .2em .05em;
border-radius:.3em;
border:.13em solid hsl(30,20%,40%);
box-shadow:1px 1px .3em -.1em black inset;
white-space:normal
}
.token.comment,.token.prolog,.token.doctype,.token.cdata{
color:hsl(30,20%,50%)
}
.token.punctuation{
opacity:.7
}
.namespace{
opacity:.7
}
.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{
color:hsl(350,40%,70%)
}
.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{
color:hsl(75,70%,60%)
}
.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{
color:hsl(40,90%,60%)
}
.token.atrule,.token.attr-value,.token.keyword{
color:hsl(350,40%,70%)
}
.token.regex,.token.important{
color:#e90
}
.token.important,.token.bold{
font-weight:bold
}
.token.italic{
font-style:italic
}
.token.entity{
cursor:help
}
.token.deleted{
color:red
}
pre{
position:relative;
padding-left:3.8em;
counter-reset:linenumber
}
pre>code{
position:relative
}
pre>code .line-numbers-rows{
position:absolute;
pointer-events:none;
top:0;
font-size:100%;
left:-3.8em;
width:3em;
letter-spacing:-1px;
border-right:1px solid #999;
-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:.8em;
text-align:right
}
.box-code{
max-height: 498px;
outline: none !important;
overflow: auto;
text-align: left;
width: 650px
}
بعد كده حط دول في header
كود PHP:
<script src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
<script src="ckeditor/plugins/prism/lib/prism/prism_patched.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
طيب انا عايز ااول ما اعمل الاكواد ده يجي في مربع
بسيطه
اتروح علي المسار ده
ckeditor < plugins <codesnippet
اتفتح ملف plugin.js
اتبحث عن السطر ده
كود PHP:
template: '<pre><code class="' + codeClass + '"></code></pre>',
بدله بده
كود PHP:
template: '<pre class="box-code"><code class="' + codeClass + '"></code></pre>',
الحكايه انك حطيت كلاس box-code
انا انا عامله علشان لو الكود كبير ميكبرش الصفحه ويخليه مليانه
كده احنا خلصنا
بالنسبة لاضافه الاكواد بتتعمل من الاضافه ده
https://6.top4top.net/p_123435gg31.png
اول ما تفتح ايجيلك مربع كبير
الاول اختار نوع الكود علشان الالوان تظهر علي اساسيات الكود
وكده اكون خلصت ورمضان كريم
|
