logo
down
shadow

SVG in Jekyll not showing in browser, but code is


SVG in Jekyll not showing in browser, but code is

By : BOSCO
Date : November 28 2020, 09:01 AM
fixed the issue. Will look into that further This question is pretty old, but I found it and I was having the same problem. I think I am even using the exact same jekyll theme (Gravity) because all your code looks the exact same.
The problem is that your SVG is 40 by 40 when it needs to be 16 by 16. When you resize the icon, the icon shows up automatically. It turns out resizing SVGs are a much bigger pain than I anticipated. Since jekyll inlines the SVG, it is hard to use CSS to scale the image. I ended up using inkscape to scale it. Here is the SVG scaled to the right amount.
code :
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="16"
   height="16"
   id="svg3512"
   version="1.1"
   inkscape:version="0.91 r"
   sodipodi:docname="so.svg">
  <metadata
     id="metadata3532">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs3530" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1366"
     inkscape:window-height="716"
     id="namedview3528"
     showgrid="false"
     inkscape:zoom="13.375"
     inkscape:cx="8.8971963"
     inkscape:cy="20"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg3512" />
  <path
     d="m 0.008293,9.3258921 1.5355776,0.011805 -0.053534,5.3604269 10.2194594,0 0,-5.3410357 1.61808,0 0,6.6429117 L 0,16 0.00829,9.3258965 l -3.2e-6,-3.1e-6 z"
     id="path3514"
     inkscape:connector-curvature="0"
     style="fill:#919191" />
  <rect
     y="12.494941"
     x="2.5122814"
     height="1.3352591"
     width="8.0052414"
     id="rect3516"
     style="fill:#919191" />
  <rect
     transform="matrix(0.9971499,0.07544586,-0.12218858,0.9925069,0,0)"
     y="9.8704548"
     x="3.9171355"
     height="1.3725955"
     width="8.0334988"
     id="rect3518"
     style="fill:#a78b68" />
  <rect
     transform="matrix(0.97638557,0.21603521,-0.33873527,0.94088172,0,0)"
     y="6.511641"
     x="5.775034"
     height="1.399946"
     width="7.9325705"
     id="rect3520"
     style="fill:#c19653" />
  <rect
     transform="matrix(0.90379955,0.42795605,-0.61032155,0.79215378,0,0)"
     y="1.6542813"
     x="6.9925656"
     height="1.4789127"
     width="7.6219997"
     id="rect3522"
     style="fill:#d48c28" />
  <rect
     transform="matrix(0.67463587,0.73815069,-0.87187447,0.48972943,0,0)"
     y="-6.0284266"
     x="5.8885627"
     height="1.627701"
     width="6.9478498"
     id="rect3524"
     style="fill:#fe8908" />
  <rect
     transform="matrix(0.20846184,0.9780305,-0.99152913,0.12988454,0,0)"
     y="-14.397026"
     x="1.9119557"
     height="1.7366618"
     width="6.3626075"
     id="rect3526"
     style="fill:#ff7a15" />
</svg>


Share : facebook icon twitter icon
Showing file name in Jekyll with Pygments code highlight

Showing file name in Jekyll with Pygments code highlight


By : albx
Date : March 29 2020, 07:55 AM
hop of those help? When highlighting a standard file at a known location I'd like to put the file name in the code block; preferably at the top. A hypothetical example would be , You can simply use the nice html5 figure tag.
code :
<figure>
  <figcaption>File: folderName/fileName.rb</figcaption>
  {% highlight ruby %}
  def print_hi(name)
    puts "Hi, #{name}"
  end
  {% endhighlight %}
</figure>
Browser showing 200 status code and showing as cached

Browser showing 200 status code and showing as cached


By : dummy
Date : March 29 2020, 07:55 AM
I wish did fix the issue. This is the expected behaviour.
By using expires [some-date-in-the-future] you're basically telling the Browser to use it's local cache to serve the request until that date is reached. The Browsers local cache answers with a 200 OK response, since that's what the Protocol expects if a resource is successfully fetched.
jekyll yaml code not showing in markdown file

jekyll yaml code not showing in markdown file


By : Harshavardhan N
Date : March 29 2020, 07:55 AM
Any of those help if I understand you correctly, you need to display liquid code in a liquid (Jekyll) template. If so, you need to wrap your code in a {% raw %} tag like this:
code :
```

{% raw %}
{% assign features = site.work | where:"featured", "yes" | sort:"featured-rank" %}
{% endraw %}

```
Jekyll: how to not interpret jekyll / ruby lines in a code snippet (rouge)?

Jekyll: how to not interpret jekyll / ruby lines in a code snippet (rouge)?


By : Ediosn
Date : March 29 2020, 07:55 AM
it helps some times I have this snippet of code in a Jekyll post: , Surround code with
code :
 {% raw %}
{% endraw %}
Posts not showing correctly on jekyll (multiple site) blog -- only post code

Posts not showing correctly on jekyll (multiple site) blog -- only post code


By : acristi
Date : March 29 2020, 07:55 AM
I hope this helps . blog.md is a markdown file.
In markdown a four space indentation represents code or preformatted text. Kramdown will wrap this code in
 tag, resulting on what you actualy see on your site.
code :
{% for post in site.posts %}
{% if post.categories contains 'blog' %}
<div class="post">
 <h3 class="title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
 <p class="meta">Date: {{ post.date }}</p>
 <div class="entry">
  {{ post.content | strip_html | truncatewords: 100 }}
 </div>
</div>
{% endif %}
{% endfor %}
Related Posts Related Posts :
  • What are the key differences between HTML 4 and HTML 5? How to know, which HTML to use?
  • Horizontal and Vertical alignment of a toolbar with Bootstrap elements
  • Prevent flex items from stretching
  • Does img inherit parent element dimensions?
  • How escaping is safe?
  • Can I apply remote: true to an html href link?
  • Absolute and relative positioning involving media queries?
  • Html code parsed on desktop, but not parsed on mobile viewing?
  • Center the text in a row of an HTML table
  • Polymer 1.x: How to data bind to a variable boolean attribute?
  • scrolling an element on top of a fixed element
  • Link to pages/home not rendering the way I expect
  • Using Bootstrap's model, .modal-header and .modal-footer not working
  • How can I SIMPLY Toggle/Hide a Menu from sub-menu in AngularJS
  • Using CSS with Bootstrap framework
  • How do I get a html5 file input to accept only certain file types consistently across browsers?
  • Jumbotron BG image resizeable, wont show up
  • Resize images to fit display:flex divs
  • Three layers transparency
  • HTML side by side divs, while one has fixed width and the second one fits remaining space
  • DIV Stacking & Spacing Using CSS
  • How to make space between menu items in CSS/HTML
  • CSS display:flex equal parts
  • Image Caption Hover Animation in html or/and css
  • How can I create an alignment toward the top left corner?
  • Page is showing two scrollbars
  • Z-index issues - How to bring a child element onto the parent's below element?
  • Ingesting videos via bulk uploading into Azure media services from HTML5
  • border-radius with dropdown menu
  • Is there an HTML entity for an info icon?
  • Style two html form text area/inputs on same page differently
  • Bootstrap 3 Grid Layout not respecting blank "Margin" columns?
  • HTML tag with different attributes
  • CSS Clear depending on odd of even amount of items
  • Center div on wrapping (when it doesn't fit on the line)
  • How to remove blank space around SVG
  • Vertical Align Bootstrap Radio Button Image
  • Bootstrap HTML carriage return
  • CSS Checkbox Styling Behaving Differently on Other Pages
  • How to keep a link disable when it's still on the same page
  • Container div overlapping child horizontally
  • How to set both a background colour and a different text color on the same element
  • How to vertically & horizontally center children elements in a fluid layout set by media queries?
  • Layer responsive images on top of each other with Bootstrap
  • Is there a way to hide html inside curly braces in an ASP.NET MVC Razor html helper?
  • Show variable content in bootstrap tooltip
  • How to reference to WIN32 object under MS Windows 7 64bit in VBScript
  • Center inline-block list
  • Background image isn't showing up. Why?
  • CSS Click after transform
  • CSS Button Animation - How to Accomplish?
  • How to find out which favicon a browser actually uses
  • CSS Media Queries Overriding Each other
  • Cycle2 Carousel not working when it's in a DIV
  • HTML to landscape MS Word
  • Reduce the background simultaneously as site reduction - Bootstrap
  • How to set vertical align of elements that exist into a div tag to center with css?
  • I'm resizing an image while scrolling in my website, but i cant figure how to make an animation for the resizing
  • How to style up a hr tag
  • vertical scrolling blocked by Hammer.js
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co