![]() ![]() The slight disadvantage could be that you have to scroll between the content and code blocks. You can even use code blocks in the lists and such. The advantage here is that you can still use the editor in the Visual mode and it won’t mess up your formatting. ![]() Then, use the shortcode with the relevant id in the blog post content editor. First, add a new row to your code blocks, paste the code to the textarea, and select the code language. We can import styles this way because the node_modules folder is in the Sass path in Chisel.įinally, to build the project, run: npm run build Adding code blocks in postsĪdding code blocks in posts should now be easy. To add the required CSS, import it from the installed Node module in the main.scss: 'prismjs/themes/prism' To add support for other languages, simply require additional components like we did with PHP above. ![]() Then, delete existing content of the src/scripts/app.js file and add: require('prismjs') īy default, Prism comes with built-in highlighting for HTML, CSS, JavaScript and C-like languages. Start by running the following command from your project folder: npm install -save prismjs Now, we will add code highlighting using Prism.js. It can only return text which will replace the shortcode in the post content. It’s important to use the compile method instead of the render method because shortcode cannot produce any output. If there are any code samples, process their shortcodesĪdd_shortcode('code', function($atts) use ($samples) Setting up code samples subfields with ACF Getting and displaying code blocks with TimberĬopy the following code to single.php ID) ![]()
0 Comments
Leave a Reply. |