Armadillo blog code blocks

I’m wondering if anyone has found a way to format code snippets in an Armadillo blog post? There are solutions to have block of code syntax highlighted list HighlightJS for the web. Or perhaps a simple CSS solution exist?

For an example of what I’d like, see this blog post and compare it with what I can now do with code block in markdown.

Thanks!

I don’t post code often, but you can certainly add CSS to Armadillo. For example:
http://adis.ca/entry/2011/pretty-code-block-in-css/

Certainly highlightJS is very popular. It seems it may be easy enough to add: though I have not done so.

1 Like

That’s the thing, I can see where to customize CSS in Armadillo but not where to insert JS. Customizing CSS would help but I’d much prefer being able to use highlightJS or something like that.

Thanks for the CSS, I’ve pasted that in and it does help.

@denis I feel like there must be someway to accomplish what you want but I don’t know how personally. @nimblehost: could you address this? I’m very interested as I will soon start work on new course and I’d love to be able to include “pretty” and nicely formatted code with Armadillo. Any good way to include HighlightJS?

1 Like

@Mathew @denis The “Social Sharing” section will accept any HTML, including script tags, and insert them on every page and post, so you can use this to add whatever script, like HighlightJS, that you want to use - it’s not limited to “social sharing” code. :wink:

EDIT: That does mean, however, that you’ll need to select “show social sharing links” in that section, even if you’re not using it to add social sharing code, in order for the snippet you add to be included on each page/post.

@nimblehost Thanks for the tip. It doesn’t work for me at the moment, I can’t save the setting as it reports there is an error. I suspect that’s because I don’t reference the path to the script correctly. I’ve tried a few things but I’m not sure what’s the base path Armadillo is looking from. I’ve place my script folder at the base URL and tried to …/ up a level or two but I always get an error.

@nimblehost Well it’s actually worst than that. I removed the script from the social media tab and saved the settings, waiting for instructions on how to reference the script and when I saved the setting it went into an infinite loop (there was a kind of a progress indicator below the ‘save settings’ button). After a while I just closed the window and now my blog is not available anymore. :frowning: Help!

I have not been able to get the various styles working yet, but I can implement the default HighlighterJS. Here’s the exact code I put into social sharing area:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();
</script>

All of it is necessary. Hope I can figure out how to identify styles. I thought I was doing the right thing, but that part is not working yet.

Okay, I figured it out. I need to insert the name of the style like this:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/github.min.css">

The name of the style is github. But what I was doing was replacing “default.min.css” with “github.css”. The “min” portion needs to remain. So the actual style in this case will be “github.min.css”

That works because you’re using the default supported languages. I want to highlight Swift, which is not in the default languages so I need to generate a separate script, download it and put it on my server. I did that and tried to link to it from Armadillo.

But now my blog is not showing at all since the “save settings” bug happened. I can’t even reach the settings to change anything or try anything. I’m waiting on @nimblehost for his help on fixing this.

Got it. I hope things get sorted out for you quickly.

Well, no news from @nimblehost yet, but thankfully the blog started to work again after some time. I still don’t know what path I should give for Armadillo to find the script.

Sorry for the delay @denis, was on a plane from Japan to the East Coast the beginning of the week, and jet lag is a bear.

I still don’t know what path I should give for Armadillo to find the script.

Armadillo itself doesn’t need to find the script. The path you specify for the script should be one that web browsers are able to resolve when displaying a particular page. The “easiest” method is to use an absolute URL as that should work in all situations; something like //www.your-domain.com/rw_common/plugins/stacks/armadillo/whereever-you-place-the-file.js, or if it’s on some other site/CDN then //cdn.net/path/to/script.js.

I’ve place my script folder at the base URL

By “base URL” I assume you mean the root directory of your site? In that case the absolute URL would be //your-domain.com/script-file.js

A relative URL is something like ../../path/to/script.js and will likely need to be different from page to page (web browsers will resolve the URL based on the page a visitor access), hence can be confusing and not what would recommend in this particular case.

Hello @nimblehost, thanks for the reply. I tried putting an absolute URL and it still doesn’t work for me. When I try to save the settings, I get an error message An error occurred when trying to save your settings. This is the block of code I put in the Social Sharing settings:

<link rel="stylesheet" href="//www.hexaedre.com/hljs/styles/default.css">
<script src="//www.hexaedre.com/hljs/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

I also tried to add http: before the //www. but same result.

I checked and both paths are valid (I can type them in a browser and I get the appropriate files). I double-checked the syntax and everything seems to be ok.

To make sure I tried the following code block:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/monokai.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Which is the standard HighlighJS hosted on CDN. This gives me the same error when pasted in the Social Sharing block. I tried putting a test file on my site with the same block and it works: test page.

That page has the same block as I tried in the Social Sharing block. Now, I must be doing something wrong here but I can’t figure out what it is.

Based on past experience this particular error only occurs with certain hosting configurations, which explains why I’m not able to reproduce it in my test environment. When saving settings in Armadillo the data is sent via AJAX, and it appears some some hosting providers limit what data can be sent in this way.

My guess is that if you remove the script tags and their contents from the snippet, that saving settings would then work - of course, that defeats the purpose of adding the snippet in the first place. :wink:

Yes well I obviously thought of removing the snippet! :slight_smile: But, as you say, that brings me back to square one…

I’m not sure I understand where that data is sent. I’m guessing in a configuration file on my server in a subdirectory, or perhaps in a database file. Is there no way (for me) to write the script there directly without going through the web interface that sends it via AJAX?

Also, it seem strange that providers would limit this snippet and not the rest (whole blog post, media, etc.). For instance I pasted the custom CSS Mathew suggested in the ‘Custom Styles’ section of the same settings and it saved without error. That shouldn’t be too different than sending the script?

The code snippet is stored as text in the database - no files are saved on your hosting account. The code snippet is then added to a page displayed to a visitor to your site. Since the code snippet references a location on some other website, the browser for that visitor will go to that location and download the file from there directly.

Also, it seem strange that providers would limit this snippet and not the rest (whole blog post, media, etc.).

Because the code snippet in the Social Sharing section includes a <script> tag it may trigger security filters on some hosting providers to prevent things like XSS (cross site scripting attacks), due to the method the data is saved (asynchronously, rather than as a separate page load). This is why text added to the Custom Styles section works fine, because only CSS code is added there, not javascript.

Probably the easiest way to work around the hosting configuration filter in this case would be to add that entire code snippet to RW itself and republish, instead of doing so in Armadillo.

1 Like

That totally makes sense, thanks for the explanation.

And thanks for the suggestion to put in in the code section of RW, that worked great.

1 Like

Always happy to help~ :slight_smile:

1 Like