یکی از رایج ترین نرم افزار هایی که برای رنگ کردن کد ها استفاده میشود SyntaxHighlighter است .این پلاگین مستقیما بر روی کدهایی اثر میکند که در تگ <pre /> قرار گرفته باشند .
اما اگر برای ادیتور متن های خود CKEditor را به کار میبرید به سادگی نمیتواننید از این رنگ کننده کد -SyntaxHighlighter- استفاده کنید.
ادیتور متن CkEditor برای ایجاد بلاک کد از تگ </pre > به همراه تگ </code > استفاده میکند که این امر استفاده از SyntaxHighlighter را برای نمایش بهینه از کد دچار مشکل میکند ، CkEditor عموما از دو تکنیک سمت سرور و سمت کلاینت برای این امر استفاده میکند اما به طریقه سمت کلایت از ورژن 4.0 به بعد فراهم شده است .
این ادیتور برای سمت کلاینت از highlightjs استفاده میکند .
کافی است یا در زمان دانلود Ckeditor اختصاصی این پلاگین را به آن اضافه کنید و یا به صورت دستی پس از دانلود به CkEditor خود اضافه نمایید . توضیحات تکمیلی در این زمینه در این لینک میتوانید ببینید
، اما برای نمایش صحیح در صفحه ای که قصد ارائه کد به کاربران و یا بازدید کنندگان از سایت را دارید لازم است از این کد ها استفاده نمایید.
<head>
...
<link href="ckeditor/plugins/codesnippet/lib/highlight/styles/default.css" rel="stylesheet">
<script src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
</head>البته میتوانید فایل highlightjs.pack.js را مستقیما از سایت آن دانلود کنید پس از اضافه کرده به پروژه در head لینک کنید و یا از CDN آن استفاده نمایید