![]() This includes working on the back-end code, modules and themes, as well as optimizing front-end elements such as HTML, CSS and JavaScript. They are responsible for building, maintaining and improving the performance of Drupal websites. If you want to learn more Drupal, join OSTraining now.Remote Drupal Developer is a professional software engineer who specializes in developing websites with the open source Drupal content management system. Use the CodeSnippet contrib module and the CKEditor CodeSnippet plugin to get your code snippets nicely styled and highlighted. By default, such code snippets will get displayed without highlighting. Conclusionĭrupal core is limited when it comes to demonstrating code snippets in its articles and pages. Play with code snippets with other languages to get the feel how they pan out. You will see your HTML code nicely highlighted: Now check your new page at the site front end. ![]() Select the Xml language from the dropdown list of languages: Paste your HTML code snippet into the Code content box: You will see the Code snippet content area.Go to Content > Add Content > Article.For demonstration purposes, you will create a Drupal article and insert into it an HTML code. Next step is to see the CodeSnippet plugin at work. Repeat the same step for the Full HTML text format.Select a CSS style and code languages to your preference.The Supported Languages checkboxes with different programming languages you may wish to highlight.įor now, you can leave both settings as they are.The highlight.js Style select box with various CSS styles for you to choose from.Notice, that once you dropped the CodeSnippet button to the Active toolbar, your CKEditor plugin interface changes. Inside the Tools group, that is next to the source button, will be a good place to drop it onto: Drag and drop it to the Active toolbar.Locate the CodeSnippet button on the Available buttons toolbar.Go to Configuration > Text formats and editors > Basic HTML. ![]() Add the Insert Code Snippet Button to Your CKEditor Toolbar Good job! Next, you need to get the Insert Code Snippet button available to you. After a few seconds, you should see the message, confirming that your CKEditor CodeSnippet has been successfully enabled:.In your Drupal dashboard, go to Extend > OTHER and install the CKEditor CodeSnippet:.For a few moments, you will be seeing loading, installation, and cleanup related messages:.Your command line prompt with this command will look similar to the image below:.In your command line terminal, go to the folder with your Drupal installation and type the following command:.Upload the /codesnippet/ folder to the /libraries/:.Unzip the plugin file you just downloaded.In the root of your Drupal installation, create the /libraries/ folder:.Go to CKEditor site and download the CKEditor CodeSnippet plugin:. ![]() The plugin, however, has to be downloaded and installed. You have CKEditor in your Drupal out of the box. The CodeSnippet module works with CKEditor and its plugin CodeSnippet. You will also take a look at its basic usage.įor the purpose of this tutorial, you will be working on a freshly installed Drupal 8 site. This module enables the CKEditor CodeSnippet plug-in responsible for highlighting and styling your code snippets.īy the end of this tutorial, you will have learned how to install and configure this plugin. Use the CKEditor CodeSnippet contributed module to show code nicely highlighted. And here is how you will see a PHP code:.If you use the and HTML5 tags in out of the box Drupal, your HTML code snippet will look as in the image below:.In this blog post, you will learn how to show code snippets in Drupal content highlighted with the CKEditor CodeSnippet module and CKEditor CodeSnippet plugin. Out of the box, Drupal displays code snippets that don’t get highlighted.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |