Two New Plugins Released

Useful plugins tp enrich your content...

Andy Miller posted on 10/08/2014 in plugin

We are hard at work on the next 0.9.3 version of Grav that has a couple of really cool new features and many fixes. Also development of the new Grav admin plugin is progressing well and we will have a separate blog post to show progress of that. Today however we switched [getgrav.org]() to use our new GPM system for managing plugins, themes, and skeletons. As part of that we have released two new useful plugins: highlight and assets

Highlight Plugin

Displaying code is a doddle in Grav due to the built-in support within Markdown, but what is missing by default is syntax highlighting of your code snippets. We initially hard-coded support in our [http://learn.getgrav.org]() site via the template, but we got so many requests about how to do this, we created a simple plugin to do it automatically. Just install the plugin, and your code is magically highlighted!

The plugin details can be found on GitHub, but a quick demo of it in action can be seen below:

<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <p checked class="title" id='title'>Title</p>
  <!-- here goes the rest of the page -->
</body>

It supports many theme options that you can use as-is, or tweak to your needs. Also it comes bundled with most of the common content types such as html, css, js, php, python, etc.

Assets Plugin

In version 0.9.0 we introduced the Assset Manager that makes it simple to add CSS and JS assets from your plugins and themes. But what about from your content? The new Assets Plugin allows you to use a simple syntax to dynamically add content from your pages too. This way you can easily add some custom CSS styling, or a JavaScript library or initialization.

What better way to show off the usefulness of this plugin than with an example. Below is an interactive JavaScript map that is setup and loaded 100% from this page alone:

{assets:css order:5} http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css {/assets} {assets:js order:5} http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js {/assets} {assets:inline_css} div#map {height: 180px;} .leaflet-top,.leaflet-control {z-index: inherit !important;} {/assets} {assets:inline_js} $(document).ready(function() { var map = L.map('map').setView([51.505, -0.09], 13); var marker = L.marker([51.5, -0.09]).addTo(map); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'OpenStreetMap' }).addTo(map); }); {/assets}

This is done with the following code in this page:

{assets:css order:5}
http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css
{/assets}

{assets:js order:5}
http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js
{/assets}

{assets:inline_css}
div#map {height: 180px;}
{/assets}

{assets:inline_js}
$(document).ready(function() {
    var map = L.map('map').setView([51.505, -0.09], 13);
    var marker = L.marker([51.5, -0.09]).addTo(map);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: 'OpenStreetMap'
    }).addTo(map);
});
{/assets}

<div id="map"></div>

!! NOTE: The inline_css and inline_js types do not support HTML tags in the strings.