![]() (There’ll be another file along with it:. * Import CSS reset and base styles "prism.css" Īdd prism.js to assets/js/lib. Open screen.css in your code editor and import the new CSS file. (There will be two other CSS files along with it: screen.css and global.css.) We’re going to add these files to the Casper theme, but the process can easily be adapted to work with any Ghost theme. Scroll to the bottom of the page and download the JS and CSS. For example, to place the sidebar on the right side and a black. Choose your theme and the languages you want to be supported. A theme is a collection of HTML templates, stylesheet(s) and other static files. Take care of your eyes, use dark theme for night and daily browsing. Your code snippets will now be looking gorgeous □ Add Prism via theme customizationīy adding Prism directly to your theme files, you have more options when it comes to styling the syntax highlighting. Save – and that’s it! Add a code block to the editor and publish. Add links to the JS files ( and ) in the Site Footer: For example, if you have JS and Python code snippets, the autoloader will ensure that those languages are highlighted properly. When using a CDN, Prism also recommends using their autoloader script, which will automatically load the languages you need. We’ll load the Tomorrow Night theme via the Site Header: You’ll want to use the latest version available. At the time of writing, Prism is on version 1.28.0. We’re going to load these resources via Code Injection using a CDN. To function, Prism requires JavaScript and CSS. While both techniques will yield the same result, the second, more complicated one offers more options for customization. We’re going to use the Prism library to add syntax highlighting using two different techniques: Code Injection and theme customization. It’s not just an aesthetic improvement – it also improves its readability. Syntax highlighting is the application of styling to your code based on its meaning.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |