I have several partials that I'm including in my Rails application.html.erb file, but the resulting HTML doesn't preserve my indenting (formatting). I've been told that the first line gets rendered with the same indentation-level as the call to _partial.html.erb, but all subsequent lines in the partial just get left-aligned.
This results in code like (see my comments for positioning):
<body>
<div id="outer">
<div class="contentwidth main">
<div class="logo"> <<<<< Shouldn't be this far to the right
<h1>minimal.</h1>
</div><!-- end logo --> <<<<<<< Shouldn't be way over to the left
Is there any way to fix this/format my included partials better using ERB? Or do I need to use HAML?
Not the answer you want - but - no, there's nothing built into Rails to auto-indent ERB.
The doc on filters contains an example of using an after filter to compress the html before sending it to the browser.
Doing something similar, but using something like Tidy to reformat and replace the html where this example does a compress might do the trick.
Related
I have a Gatsby + WP API blog setup (with Markdown enabled) and it's working great, except when I'm trying to display HTML markup as code snippets. I'm using escape characters (see below), but for some reason the HTML inside the <code>/<pre> tags is rendering as actual HTML instead of displaying as an HTML code snippet.
I understand that's what dangerouslySetInnerHTML is there to do, but I didn't think it would if I'm using the escape character <?
Here's the markup inside the WP blog post..
<pre class="language-markup"><code>
<div>
<p>Lorem ipsum...</p>
</div>
</code></pre>
And this is how I'm displaying the entire post content in the react component...
<section className="article-body" itemProp="articleBody"
dangerouslySetInnerHTML={{ __html: this.props.html }}
/>
The <div> and <p> tags rendering as HTML, instead of displayed as a code snippet..
Is there some other way I should be doing this? For the record I also tried this using a 'non-dangerously' method (react-render-html) with the same results.
-- UPDATE: --
I was able to display the HTML as a code snippet by replacing the <code> tag with <xmp>. I know this tag is no longer officially supported, and it's far from elegant, so I think I may try to separate code snippets from the rest of the content as suggested below.
I tried it in CodeSandbox, too - working as expected. If you're sure about data (escaping) received from WP API I affraid it's a Gatsby issue. There must be a place where it's modified (unescaped).
If data will be ok and you don't want to make deep ivestigation there could be workaround. Split article body and treat sections separately - texts and code snippets. The second wrap with code literal with sth like this:
const CodeBlock = (props) => {
return <section className="article-code">
<pre className="language"><code>{`${props.html}`}</code></pre>
</section>
}
Of course remove unused first and last line of original code/snippet block.
I have a simple HTML site. The main element is a grid of images. They're all classed with their row and column. There are 5 columns, A-E.
<div class="grid">
<div class="box 1 a"><img src="./assets/Account-Attempt-4-1.gif"></div>
...
</div>
I would like to specify a batch of images (preferably in Windows Explorer) and have them formatted like the child elements of my grid.
Is there something out there that will do this that I'm just bad at Googling for? I'm on Windows 10.
My first thought would be to create a macro in a code editor, like Sublime Text. The macro would incorporate some method of auto incrementing the numbers at the ends of the file names (probably with the use of a plugin), but this is based off of the assumption that all of the images in the folder follow the same naming convention (e.g. image-1.jpg, image-2.jpg, image-3.jpg).
I think that a better option for you would be to do something like this answer that I found. With a little bit of tweaking, this method should be able to take all of the images inside of a defined directory and return an html file with formatted lines of code.
Best of luck to you!
Just started jekyll, and I want to display a link to one of my posts on the index.html page. I looked through the documentation and the following code appears to be what I'm suppose to do.
The following is in index.html
<p>......</p>
[Hello World]({% post_url 2015-01-19-soccer %})
<p>........ </p>
but it simply displays
.....
[Hello World]({% post_url 2015-01-19-soccer %})
.......
what am I doing wrong?
Since you used a mix of Markdown and HTML, which is causing the markdown processor to ignore anything in between the HTML blocks.
Markdown is also sometimes not processed when you have HTML right above the Markdown. (This is the case for you, since your example shows you have closed off the <p> tags)
There are a few ways around this.
Make sure there is a newline in between any HTML and Markdown, this will not show up as a <br> or a <p> in the final output, but rather ensures that the processor will convert the Markdown correctly.
So you should have something like this:
<p>......</p>
[Hello World]({% post_url 2015-01-19-soccer %})
<p>........ </p>
Notice the extra line there between the first <p></p> and the Markdown.
Use only HTML (this is as answered by user #topleft)
Use only Markdown, since <p> tags are supported.
Try the markdown=1 HTML attribute.
Markdown processors like Kramdown allow you to add an explicit tag to tell the processor to go through HTML blocks and process any Markdown there. I'm assuming you're using the default (which I believe is Redcarpet) and couldn't find the links on whether this is supported. But you can try this:
<div id="someDiv" markdown=1>
[This is a Markdown link that will be parsed](http://www.example.com)
</div>
You are using markdown language here, it won't work in html. You need to use that instead :
Hello World
site.baseurl default is empty
you can change it in _config.yml to suit your needs
for instance :
baseurl: "me/blog"
I am making a forum with markdown support.
I've been using meteor's markdown parser {{#markdown}} and have found something disturbing that I can't seem to figure out.
I am using {{#markdown}}{{content}}{{/markdown}} to render the content inserted into database.
The disturbing thing, for example, if someone writes up html without inserting it into the code block in the content...
example
<div class = "col-md-12">
Content Here
</div>
This will render as a column. They could also make buttons and etc through writing the HTML for it.
How to disable this behaviour so that when HTML is written it will not render into HTML but just simply show it as text?
You can write global helper, which will strip all html tags:
function stripHTML(string){
s = string.replace(/(<([^>]+)>)/ig, '');
return s;
}
Template.registerHelper('stripHTML', stripHTML)
Usage :
{{#markdown}}{{stripHTML content}}{{/markdown}}
Test it in console:
stripHTML("<div>Inside dive</div> Text outside")
I have to render HTML content using AngularJS, I can do it like so
<div ng-bind-html="myHtmlContent"></div>
And it works, but the only problem I have is I don't want to render it inside a string, I rather want it to just render it where I want to render it. e.g
<div>
<h2>{{page.ttitle}}</h2>
{{myHtmlContent}}
</div>
like here, I don't want to add another div, and load myHtmlContent inside. Is there a way to do that ?
Im afraid you can't, unless you write your custom directive like :
<my-direcive></my-directive>
or
<my-direcive var="myHtmlContent"></my-directive>
You can also put all diectives in one element e.g.
<body ng-app="bindHtmlExample" ng-controller="ExampleController" ng-bind-html="myHTML">
</body>
This is probably not the best practice but should work.