I have a bunch of Markdown files. In them, I want to be able to use custom bullets and other images; these are implemented as images (with alt-text, but they're a lot prettier as images). The Markdown to create one of those images looks like this:
**
(Yes, that's rendered inside <em> </em> - that's to simplify the CSS, since I can't put a class on the img tag easily.)
Is there a way to tell the parser that the single character ✨ should be rendered as the entire <img> tag?
The site is hosted on GitHub Pages, so answers need to restrict themselves to GitHub Flavored Markdown. If it can't easily be done, I could make a pre-commit hook or something and run a local parser, but it would be far easier to have it work automatically.
You can put the emojis in includes and then reference them from your posts. That is compatible with Github Pages as it doesn't require plugins.
In your post put:
{% include emoji.html %}
That will load the contents of _includes/emoji.html:
✨
You can pass parameters to it to load different images depending on the image you want to load, e.g.: {% include emoji.html image="stars" %}
Another option is to create custom liquid tags that load them.
...since I can't put a class on the img tag easily.
You can if you use kramdown - it has a feature, which allows assigning attributes to the block level elements. For example:
{: .center }
will become
<img src="...img.png" alt="img" class="center">
Related
I've been stuck on this for an embarrassingly long time. I have two inputs that aren't displaying correctly, a markdown widget and the list widget. They both appear as one long string. I thought I needed to add a markdown parser for the former at least so I'm using markdown-it in a manner similar to this:
https://github.com/11ty/eleventy/issues/236
It is adding paragraph breaks where they should be but they show up on the page as p tags. I thought this was because I already had the parsed text nested between p tags but if I delete those nothing shows up at all. When I look at the html file created by eleventy, the tags show up as "< ;p> ;" (without the spaces) which it seems the browser isn't reading correctly when trying to interpret the html. I'm using nunjucks for templating if that matters. My .eleventy.js file looks like this currently. What am I missing? Also the markdown filter seems to only want to take a string so I'm not sure where to even begin with the list.
By default, Nunjucks HTML-escapes all variables when outputting templates. This is what you want most of the time, unless you're trying to render HTML input.
You might want to try using the safe filter after your markdownify filter.
{{ markdownContent | markdownify | safe }}
I use {% include text.md %} in my posts to include some often typed paragraphs.
I have a Generator plugin that makes some text replacement in post contents.
However, the text inside the included files (e.g. text.md) is not processed by this plugin.
How can I run the plugin after includes are performed but before html is rendered? Or how could I do things differently to make it work?
Jekyll processes a site in distinct "phases".
reset >> read >> generate >> render >> cleanup >> write
A Generator subclass is generally used to "generate" objects (Pages or Documents) that are then rendered based on the prioritydefined for the generator.
An include tag (or any Liquid constructs) is "rendered" in the subsequent phase.
Unfortunately, you cannot alter the "raw content" of a file in the middle of the rendering phase.
Jekyll provides you with just a :pre_render hook to manipulate unrendered content of a file.
Im creating an app that will process user submitted content. I would like to enable users to make their text-based content look pretty with basic html markup i.e < i > < b > < br > . However I do want to prevent them from using things like script tags. Django will auto escape everything therefore it will also disable all safe markup. I can disable this by using:
{{ somevar|safe }} or {% autoescape off %}
However this will also enable all harmfull script tags. Django does provide the linebreaks filter tag which transform white space to br or p tags while keeping the html safe:
{{ somevar|linebreaks }}
Unfortunately I am not aware of any filters that allow b or i tags to be used.
So I am wondering if there is a smart solution to this problem. And if you suggest a third party library would it be best to employ the solution when saving the model or when rendering the content.
UPDATE
In the end I went with this solution Python HTML sanitizer / scrubber / filter. This latter answer provide a way to use the Beautiful Soup library to remove all unwanted html tags from user submitted content. This can be done before saving the model therefore making it safe to use the template filter {{ somevar|safe }} when rendering the page.
Take a look at django-tinymce. It should give you the flexibility you're looking for. You're going to be safest sanitizing the content before it makes its way into your database. TinyMCE can be configured to allow or not allow whatever tags you'd like.
I would like to make some changes in Jekyll's layout. Changes are small and different. For example, linking an additional CSS or JavaScript file. Or adding some info in header. Or tuning page title.
Important that these changes depend on a page/post.
Since changes are small and diverse, creating a special layout for each of them seems to be too expensive.
I tried to create my own solution but run into impossibility to use variables in including instructions.
Has anyone solved something similar? For example, linking a special CSS to a particular post?
You can use YAML front matter to tune anything you want for any post/page. Any info you provide there would be accessible through in layouts and includes under page variable or under specific post in any list of them.
This sounds like a solution for your case: you could use YAML front matter like this:
---
extra_css:
- foo.css
- dir/bar.css
- /s/baz.css
---
And then use this in your layout's header like this:
{% for css_name in page.extra_css %}
<link rel="stylesheet" href="{{ css_name }}">
{% endfor %}
In such way you could add any logic based on what data you provide with a post in YAML front matter.
If you'd like to abstract some of those logic to modules, you can use a hack around the includes, assigning a variable before that include and then using it inside. Here is a link with a description how it's made in Jekyll Bootstrap project (btw, the site for it have a lot of nice info on Jekyll).
And, yes, Jekyll don't allow the use of variables in includes, so if you'd like to include something conditionally, you would need a list of all available includes somewhere and then create all the conditions for inserting one or another when you'll need them.
Another solution is to divide everything in layout to includes, and make layouts with different levels of complexity — this way you could set any of those basic layouts for post and then write any extra code with includes of any blocks you'll need from the basic layouts, so you post could look like this:
---
layout: custom
---
<aside class="sidebar">
{% include comments.html %}
{% include sidebar.html %}
</aside>
<div class="content" role="main">
Foo bar baz
</div>
There you could use a custom layout that don't include a basic layout for page and don't include the sidebar and comments, so you could per-post decide what level of layout you want and then redefine anything that needed to be redefined.
Also, if you'll need to tweak different places but with an unknown content, you could use YAML front matter with blocks, like
extra_head: |
<style>
* {background: red}
</style>
then you could call such variable from head: {{ page.extra_head }} and get any content you placed there. However, you can't use any liquid tags inside YAML, but you could then use any YAML tags on such variables, so you could markdownify them or replace any strings inside with anything else by simple replace filter.
And if nothing of those fit you, then Jekyll won't fit you — as I wrote in a comment, Jekyll is just a blog engine and you shouldn't wait it to be complex as XSLT.
I have ever tried to create an independent page in the jekyll-bootstrap static site. For example my_cv.html which needs independent css style. Instead of create a new github repository with gh-pages (sorry GitHub), I just simply fill all the final html contents into the a post my_cv.md since markdown format is actually compatible with html I think, and luckily it works.
I am working on a django project (my first), and in one of my views, I have a sophisticated html snippet with JS weaved within it. I would like to reuse this "component" somewhere else in the same view. Is there a way of achieving this? Please let me know if this design is faulty to begin with?
Use the {% include '/my/common/template.html' %} templatetag.
Loads a template and renders it with
the current context. This is a way of
"including" other templates within a
template.
The template name can either be a
variable or a hard-coded (quoted)
string, in either single or double
quotes.
I know it's an old one but maybe someone is gonna have use of this answer.
There's also the inclusion tag. It's like the include tag, only you can pass it arguments and process it as a seperate template.
Put this in my_app/templatetags/my_templatetags.py:
#register.inclusion_tag('my_snippet.html')
def my_snippet(url, title):
return {'url': url, 'title': title}
and then my_snippet.html can be:
{{ title }}
then, to use this snippet in your templates:
{% load my_templatetags %}
{% my_snippet "/homepage/" "Homepage" %}
More info:
https://docs.djangoproject.com/en/dev/howto/custom-template-tags/#howto-custom-template-tags-inclusion-tags
Not sure, if you like to reuse your HTML in different templates (rendered by different views). If so, look into Django's template inheritance mechanism:
The most powerful -- and thus the most complex -- part of Django's template engine is template inheritance. Template inheritance allows you to build a base "skeleton" template that contains all the common elements of your site and defines blocks that child templates can override.
You should try Django custom template tags. This way you will keep your snippets in an external file and then call them easily by something like {{ your_custom_tag }}. It's a very convenient method for working with reusable chunks of xhtml markup. You can even use arguments with these custom tags, something like {{ your_custom_tag|image:"logo.png" }}.
You can learn more about custom tags here.