I am focused on the wrong layer of abstraction here, but can't figure out where.
I have this file views/pages/overview.html.erb
<%= stylesheet_link_tag "cust/coderay"%>
<h1>Overview</h1>
<hr>
Here's my code test:
<%= html = CodeRay.scan("puts 'Hello, world!'", :ruby).div(:line_numbers => :table)%>
<hr>
Back <%=link_to "home", "home"%>.
<hr>
It took <%="%.3f" %(Time.now-#start_time)%> seconds to generate this page.
To my surprise, the pages renders like so:
When I view source on the page I get:
<!DOCTYPE html>
<html>
<head>
<title>Dash</title>
<link href="/assets/application-all.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/all/pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/pages.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="SydEiDhSNHuEE6vCfr4rajIksxBbqnm89sddC08msjs=" name="csrf-token" />
</head>
<body>
<h1>Overview</h1>
<hr>
Here's my code test:
<table class="CodeRay"><tr>
<td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"><pre>
</pre></td>
<td class="code"><pre>puts <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">Hello, world!</span><span style="color:#710">'</span></span></pre></td>
</tr></table>
<hr>
Back home.
<hr>
It took 0.006 seconds to generate this page.
</body>
</html>
Why is the bracketed css displaying as inline text? What should my usage of coderay look like here?
Many thanks -
Rails escapes your HTML by default in ERB templates. You need to turn off HTML escaping like so:
<%=raw CodeRay.scan("puts 'Hello, world!'", :ruby).div(:line_numbers => :table) %>
See more at this question and these release notes.
Related
I know about existance of layout dialect for Thymeleaf (https://github.com/ultraq/thymeleaf-layout-dialect), but before jumping into said dialect dating pre thymeleaf 3, I wanted to explore newer fragment expressions (introduced in TL3).
So as per docs - I can define base.html that will work almost the same way that the layout dialect allows fragments to be managed.
base.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="base(title, links, content)">
<title th:replace="${title}"></title>
<link rel="stylesheet" type="text/css" media="all" href="/css/main.css" />
<th:block th:replace="${links}"></th:block>
</head>
<body>
<header th:replace="~{header :: header}"></header>
<div th:replace="${content}"></div>
<footer th:replace="~{footer::footer}"></footer>
</body>
</html>
...but then when I use this in my home.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="base::base(~{::title}, ~{::link}, ~{::content})">
<title th:text="#{home.title}"></title>
<link rel="stylesheet" th:href="test">
<link rel="stylesheet" th:href="test1">
<link rel="stylesheet" th:href="test2">
</head>
<body>
<div th:fragment="content">
<span>TEST CONTENT</span>
</div>
</body>
</html>
...it acts like home.html only evaluates itself and arguments it passes to base.html because this is product:
<!DOCTYPE html>
<html>
<head>
<title>My home page</title>
<link rel="stylesheet" type="text/css" media="all" href="/css/main.css" />
<link rel="stylesheet" href="test"><link rel="stylesheet" href="test1"><link rel="stylesheet" href="test2">
</head>
<body>
<div>
<span>TEST CONTENT</span>
</div>
</body>
</html>
As you can see, title is evaluated in home.html and passed to base.html, same goes for 3 links I provided in home.html. Also content gets passed and placed in proper place. What is missing? Everything that is not argument of base.html fragment. Thymeleaf ignores evaluating my header and footer and just removes them.
Let me just note that If I were to place header/footer in home.html inside content they will be evaluated like they should - from header.html with selector header: "~{header :: header}".
Am I missing something crucial as to how this whole thing is supposed to work? What's the point of being able to define fragments that will work as layout if they can't evaluate themselves and need everything passed from "child file (caller)"?
It seems to me you mixed fragments and replacements together. The head replacement works well because you declared it correctly. But why did you declare a th:replace attribute in base.html like
<header th:replace="~{header :: header}"></header>? It is not within a fragment, not a parameter, therefore it must be replaced from somewhere.
As far as I understand you expect fragments in base.html and replacements in home.html. Then make both the header and footer fragments and declare corresponding th:replace tags in home.html.
<div th:replace="${content}"></div>
This also doesn't work because it is not within a th:fragment tag.
The bottom line: fix the hierarchy of tags and the logic of replacement.
Like Xaltotun pointed out - I needed to fix my stuff.
I've placed base(args...) in header so my passed fragments werent visible in body, thus everything failed.
Let me just add some code:
Layout.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:fragment="layout(content, title, meta)">
<head>
<title th:text="${title}">Default Title</title>
<link rel="stylesheet" type="text/css" media="all" href="/css/style.css" />
<th:block th:replace="${meta}" />
</head>
<body>
<div class="viewport">
<header class="website-header">
...
</header>
<div th:replace="${content}"></div>
<th:block th:replace="staticContentTemplate :: testFragment" />
<footer class="website-footer">
...
</footer>
</div>
</body>
</html>
Home.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="layout::layout(~{::content}, #{home.title}, ~{::meta})">
<head>
<th:block th:fragment="meta">
<link rel="stylesheet" th:href="test">
</th:block>
</head>
<body>
<div th:fragment="content">
<span>TEST CONTENT</span>
</div>
</body>
</html>
Result is as expected:
Home.html provides title, content and meta.
Layout.html gives everything else, and also copies additional template from different source staticContentTemplate :: testFragment
Tip for others: notice that I placed args in layout in this order - content since its always present, title that can be optional and meta that might not be needed - this allows us to call layout with just content: layout(~{::content}) (shorter = better).
I have a default blade file that yields other contents this is where im calling the link to style sheet and javascript i downloaded bootstrap 3.3.5 and created a link to it here is my default blade
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap335/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug- ins/1.10.7/integration/bootstrap/3/dataTables.bo‌​otstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
#yield('content')
</div>
</body>
</html>
The bootstrap is working properly in my views except one. i don't know the problem because it works fine on the others and it is extends the default blade file
I'm trying to get my first AngularJS app running with a Rails backend, so far I had some problem but somehow manage to move forward, but now there is another problem.
It seems like my Angular tags are not evaluating. This is how it looks like
Following is my setup
#app/assets/javascripts/recipes.js
this.recipe = angular.module('recipe',['ngRoute']);
this.recipe.config(['$routeProvider', function($routeProvider){
return $routeProvider.otherwise({
templateUrl: '../templates/home.html',
controller: 'RecipeCtrl'
});
}]);
Template file
#public/templates/home.html
Value of "foo": {{foo}}
Ng controller
#app/assets/javascripts/angular/controllers/RecipeCtrl.js
this.recipe.controller('RecipeCtrl',['$scope', function($scope){
$scope.foo = 'bar'
}]);
Layout file
#app/views/layouts/application.html.haml
!!!
%html{'ng-app' => 'recipe'}
%head
%title WILT
= stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application"
= javascript_include_tag '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js'
= javascript_include_tag '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js'
= csrf_meta_tags
%body
%ng-view
= yield
Edit
Source of the HTML page
<!DOCTYPE html>
<html ng-app='recipe'>
<head>
<title>WILT</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/recipes.css?body=1" media="all" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/angular.js?body=1"></script>
<script src="/assets/angular-animate.js?body=1"></script>
<script src="/assets/angular-resource.js?body=1"></script>
<script src="/assets/angular/controllers/RecipeCtrl.js?body=1"></script>
<script src="/assets/recipes.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="Mducbu35Xjovr50CaR4zX5yWNhZ/3Q8RKYaz1B8xGXg=" name="csrf-token" />
</head>
<body>
<ng-view>
</ng-view>
</body>
</html>
Hello guys I'm trying to implement the wmd editor like this on stackoverflow but I can't show the buttons of the editor only the textarea appears.. here is my codes.. Am I doing something wrong here? Or missing something? Thanks hopefully you guys could help me.
<!DOCTYPE html>
<head>
<link href="#Url.Content("~/Content/wmd.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/showdown.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/wmd.js")" type="text/javascript"></script>
<body>
<div id="wmd-button-bar" class="wmd-panel"></div>
<textarea id="wmd-input" class="wmd-panel"></textarea>
<div id="wmd-preview" class="wmd-panel"></div>
<div id="wmd-output" class="wmd-panel"></div>
</head>
</body>
I'm working on a microsite for a client, and things are working almost fine, except when I tried viewing it on firefox, I was surprised by how mis-placed things looked like..even though I disabled horizontal scrolling, in firefox u could still do it ( dont see the horizontal scroll but if you scroll horizontally it shows), even the webfont is different, although the webfont displays perfectly on firefox in other pages..and the third problem is the page top-margin, in the page properties I specified the margin to be 0 and in safari it worked, but in firefox it doesn't. could anyone please tell me what to do..I only have a spry menu bar and easing (animate2id) plugin which could be causing the problem maybe? in Safari it looks the way I want it to look..thanks in advance..
maybe I should mention that I'm a novice and I know what I know by self-learning.
here's the code in case..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Annual Report 2012</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href="micro-site.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #39949C;
overflow-x: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<link href="muli-fontfacekit/stylesheet.css" rel="stylesheet" type="text/css" />
<body leftmargin="0" topmargin="0">
<div id="rotator-controls" class="panel span2">
<div id="rotator-slides">
<a class="" href="micro-site.html" onclick="Animate2id('.slide-content'); return false" title="Go to 1st content with the default easing">1</a>
<a class="" href="#slide-content2" onclick="Animate2id('#slide-content2','easeInOutExpo'); return false">2</a>
<a class="" href="#slide-content3" onclick="Animate2id('#slide-content3','easeInOutExpo'); return false">3</a>
<a class="" href="#slide-content4" onclick="Animate2id('#slide-content4','easeInOutExpo'); return false">4</a>
<a class="" href="#slide-content5" onclick="Animate2id('#slide-content5','easeInOutExpo'); return false">5</a>
</div>
<div id="rotator-nav">
‹
›
</div>
</div>
</div><!--end of header -->
</div><!--end of slide-container -->
</div><!--end of body -->
<div id="Sitemap"></div>
</div><!--end of container -->
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
function Animate2id(id,ease){ //the id to animate, the easing type
var animSpeed=2000; //set animation speed
var $container=$("#slide-container"); //define the container to move
if(ease){ //check if ease variable is set
var easeType=ease;
} else {
var easeType="easeOutQuart"; //set default easing type
}
//do the animation
$container.stop().animate({"left": -($(id).position().left)}, 2000, easeType);
}
</script>