Comments (3)
It looks like {% raw %} is working exactly as expected; any liquid syntax within the raw tags isn't getting compiled. See https://github.com/Shopify/liquid/wiki/Liquid-for-Designers#raw
The problem is the HTML syntax isn't escaped and is rendering on the page. Here's what I use in my own Jekyll site to get HTML syntax highlighting working:
{% highlight html %}
<p class="add">Add new:
<input type="text" ng-model="newItem" ng-enter="addItem()" placeholder="New item">
</p>
{% endhighlight %}
This creates the escaped HTML (note all the <
's and >
's):
<div class="highlight">
<pre><code class="language-html hljs xml" data-lang="html"><span class="nt"><span class="hljs-tag"><<span class="hljs-title">p</span></span></span><span class="hljs-tag"> </span><span class="na"><span class="hljs-tag"><span class="hljs-attribute">class</span>=</span></span><span class="s"><span class="hljs-tag"><span class="hljs-value">"add"</span></span></span><span class="nt"><span class="hljs-tag">></span></span>Add new:
<span class="nt"><span class="hljs-tag"><<span class="hljs-title">input</span></span></span><span class="hljs-tag"> </span><span class="na"><span class="hljs-tag"><span class="hljs-attribute">type</span>=</span></span><span class="s"><span class="hljs-tag"><span class="hljs-value">"text"</span></span></span><span class="hljs-tag"> </span><span class="na"><span class="hljs-tag"><span class="hljs-attribute">ng-model</span>=</span></span><span class="s"><span class="hljs-tag"><span class="hljs-value">"newItem"</span></span></span><span class="hljs-tag"> </span><span class="na"><span class="hljs-tag"><span class="hljs-attribute">ng-enter</span>=</span></span><span class="s"><span class="hljs-tag"><span class="hljs-value">"addItem()"</span></span></span><span class="hljs-tag"> </span><span class="na"><span class="hljs-tag"><span class="hljs-attribute">placeholder</span>=</span></span><span class="s"><span class="hljs-tag"><span class="hljs-value">"New item"</span></span></span><span class="nt"><span class="hljs-tag">></span></span>
<span class="nt"><span class="hljs-tag"></<span class="hljs-title">p</span>></span></span></code></pre>
</div>
See the Jekyll docs for more details: http://jekyllrb.com/docs/posts/#highlighting-code-snippets. I don't think I did any special configuration to get those {% highlight %} tags working.
My demo page for Centrarium doesn't show this as the correct way to highlight code. I will fix that!
from centrarium.
Ah, I knew it would be something simple. I had to use a combination of the highlight and raw tags to get the html and Liquid to render correctly; just using the highlight tag ended up showing the unescaped html multiple times due to the liquid loops!
Thanks, I think it would be useful to clarify for future users on the readme.
from centrarium.
I updated the README and demo post with info about {% highlight %}
.
from centrarium.
Related Issues (20)
- Disqus not working HOT 2
- Your theme is listed on jekyll-themes.com
- Error with `bundle install` HOT 1
- Provide as gem HOT 1
- markdown format in the overview page HOT 6
- Seeking help: using standard github pages syntax highlighting HOT 1
- SCSS conversion error: undefined variable HOT 1
- is there index how i can add tag, category? HOT 3
- how to fix default image size?
- How do I make the code snippet flush with the rest of the text?
- remove typography html HOT 3
- index.html pagination don't work HOT 1
- emoji added as a huge icon in a post HOT 1
- Change in posts category:Dummy to category:dummy
- Telegram
- Search
- A problem about the posts' date HOT 1
- [Feature] LibreJS Compliance HOT 1
- [Bug Report] Pagination in index page HOT 5
- Demo link in README.md deprecated
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from centrarium.