I'm writing a bit of documentation for a jQuery plugin I authored and want to include functional code snippets in the docs. I can achieve what I'm looking for by doing this:
{% capture snippet %}
$('selector').use_plugin(args);
{% endcapture %}
<script>
$('#snippetTrigger').on('click', function() { {{snippet}} });
</script>
{% highlight javascript %}{{ snippet }}{% endhighlight %}
This seems like a much better job for a short custom plugin with the following syntax:
{% code_snippet snippetTrigger %}
$('selector').use_plugin(args);
{% endcode_snippet %}
which would have output identical to the previous plugin-free code.
The issue I'm having is with the {% highlight %} part. If I just include that in the output from my custom plugin, it just prints it as output. I want it to appropriately highlight the code via Pygments. How can I make my Jekyll plugin use the standard {% highlight %} plugin?
Related
I am currently a beginner in html and I have seen this problem many times and I do not know how to solve it. I copied a source code from a video in an attempt to make a social media. The following code is in the file home.html:
{% extends 'base.html' %}
{% block title %}
home
{% endblock title %}
{% block content %}
{{hello}}
<br>
{{user}}
{% endblock content %}
{% block scripts %}
<script>
$(document).ready(function(){
console.log('working')
})
</script>
{% endblock scripts %}
However, in the video the html page seems correct and all buttons and functions are working. On the other side my html page is like this:
...
The guide you have seen concerns Flask, a framework for applications written in Python. The code will not work because there is no preprocessor that can process it. In this case the browser will show you plain text without formatting.
How do I correctly add javascript source assets in Jekyll?
I have tried to add the source link inside _includes\head.html below
which I feel that its not a good convention.
<link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
{% include head/meta.html %}
{% include head/links.html %}
{% include head/scripts.html %}
{% include head/styles.html %}
{% include my-head.html %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.1.0/particles.min.js"></script>
Here is how the folder tree structure looks like. I am aware that I
have multiple places for my assets `js` and `css` , which I will organize later.
Your question is not very clear, but I would say that you are loading the particles library after you are referencing it. So your browser console should have some errors which you did not mention...
You should include particles js before your scripts.
{% include head/meta.html %}
{% include head/links.html %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.1.0/particles.min.js"></script>
{% include head/scripts.html %}
{% include head/styles.html %}
{% include my-head.html %}
or even better way is to just add it to your head/scripts.html so that you have all the script imports in one place, but even there you should watch on the order of importing. If some script has dependancy, it dependency should be imported before it.
I mean this website: http://getbootstrap.com/
I looked into the code at https://github.com/twbs/bootstrap/tree/master/docs
I think the .html is not typical HTML? For example
For CSS page, the source code is:
---
layout: default
title: CSS
slug: css
lead: "Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system."
---
{% include css/overview.html %}
{% include css/grid.html %}
{% include css/type.html %}
{% include css/code.html %}
{% include css/tables.html %}
{% include css/forms.html %}
{% include css/buttons.html %}
{% include css/images.html %}
{% include css/helpers.html %}
{% include css/responsive-utilities.html %}
{% include css/less.html %}
{% include css/sass.html %}
Specifically, what's the programming language, framework for building the site?
Skimming the build program shows that it uses Jekyll, which is written in Ruby.
I downloaded the whole package of Bootstrap(the middle one) and was looking into its hierarchy. I found out that this source code contains the site http://getbootstrap.com/.
For example, it has the html file of getting-started page looks like this:
---
layout: default
title: Getting started
slug: getting-started
lead: "An overview of Bootstrap, how to download and use, basic templates and examples, and more."
---
{% include getting-started/download.html %}
{% include getting-started/whats-included.html %}
{% include getting-started/grunt.html %}
{% include getting-started/template.html %}
{% include getting-started/examples.html %}
{% include getting-started/tools.html %}
{% include getting-started/community.html %}
{% include getting-started/disabling-responsiveness.html %}
<!-- Cross link to new migration page -->
<div class="bs-callout bs-callout-info" id="migration">
<h4>Migrating from v2.x to v3.x</h4>
<p>Looking to migrate from an older version of Bootstrap to v3.x? Check out our migration guide.</p>
</div>
{% include getting-started/browser-device-support.html %}
{% include getting-started/third-party-support.html %}
{% include getting-started/accessibility.html %}
{% include getting-started/license.html %}
{% include getting-started/translations.html %}
I know it can be rendered into static site by some kind of template render engine. But how to do it?
I am developing an application using Symfony2 and twig for templates. I am using a 3 level structure for templates. Base.html.twig, layout.html.twig and childtemplate.html.twig.
The problem is I am trying to include one example.html (common html file) in the next child template by using include but it doesnt work properly. Where can the problem be?
{# src/Anotatzailea/AnotatzaileaBundle/Resources/views/Page/testuaanotatu.html.twig #}
{% extends 'AnotatzaileaAnotatzaileaBundle::layout.html.twig' %}
{% block title %}Testua anotatu{% endblock%}
{% block body %}
{% include "var/www/Symfony/web/example.html" %}
{% endblock %}
Depends on where it's located. Let's say it's in Anotatzailea/AnotatzaileaBundle/Resources/views/example.html.twig; then you would include it like this:
{% include 'AnotatzaileaAnotatzaileaBundle::example.html.twig' %}