I would like to create a web page that will display data I have in a table inside a code block just the way it is here, even with a copy function.
I can already display the data on the page, I just like to have it formatted in a pretty box, maybe even with syntax highlights, I looked at Pygments but I can't get it to work.
Below is a sample code block that I would like to re-create in my Django app.
Please don't pay attention to the actual code, this is only a sample.
I would appreciate if you could please let me know in detail how to implement this.
# Python Program to find the area of triangle
a = 5
b = 6
c = 7
# Uncomment below to take inputs from the user
# a = float(input('Enter first side: '))
# b = float(input('Enter second side: '))
# c = float(input('Enter third side: '))
# calculate the semi-perimeter
s = (a + b + c) / 2
# calculate the area
area = (s*(s-a)*(s-b)*(s-c)) ** 0.5
print('The area of the triangle is %0.2f' %area)
Honestly, your question is more related to CSS and Javascript than Python / Django.
This took me a while...Based on what you said, I will assume you know the basics of Django.
models.py
from django.db import models
class Codeblock(models.Model):
text = models.TextField()
...
views.py
from .models import Codeblock
def codes(request):
codeblocks = Codeblock.objects.all()
return render(request, 'list_codes.html', {'codeblocks': codeblocks})
To format code blocks you can use HTML pre and code tags (Bootstrap 5 examples):
<pre><code>{{codeblocks.text}}</code></pre>
The tricky part was trying to find a way to hightlight the syntax. After a few dead ends I have found highlight.js that worked very well. It has documentation on basic usage and various themes for you to play with, you can test them using this CDN library, it is also possible to write your own theme.
There was one last problem related on how to copy the text. Although it is easy to copy text to clipboard, its not an easy task (at least for me) to have a styled button placed in the right place. To not extend myself, after a while I found this highlightjs-copy project, that not only copy the text to clipboard but has a perfect button in the right place.
With that being said, at last, here is an example:
list_codes.html
<!DOCTYPE html>
<html>
<head>
<!-- bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- highlight.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/ashes.min.css" integrity="sha512-KX15mI6Sw0VzQyAOf4MAPS9BZ0tWXyZrGPHKSkqDmy40Jl+79f8ltpj6FvLJ+3obnH56ww0ukclsd6xGAxb5mA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- highlightjs-copy -->
<script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"
/>
<script>hljs.addPlugin(new CopyButtonPlugin());</script>
</head>
<body style="background-color: hsl(0,0%,22.5%);">
{% for codeblock in codeblocks %}
<div class="container">
<!-- Need to be in one line or will not render correctly -->
<pre><code class="language-python">{{codeblock.text}}</code></pre>
</div>
{% endfor %}
</body>
</html>
Since the "non-specific" question I asked earlier didn't have the repercussion nor the closure I was expecting and needed, I decided to move on with the implementation I left there and perpetuate the user decision regarding the use of cookies through a cookie, even though this is as stupid as it sounds.
I'll favour the general laziness around replicating the fully functional, yet not exactly useful, HTML of the other topic in here:
<!DOCTYPE html>
<html>
<head>
<title>GDPR Compliance Implementation</title>
<style stype="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html,body{color:#242729;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:13px;line-height:1.26666667}body{background:#FFF;box-sizing:border-box;color:#242729;display:flex;flex-direction:column;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:13px;line-height:1.30769231;min-height:100%;min-width:1075px}a,.s-link{color:#07C;cursor:pointer;text-decoration:none}a.s-link__inherit,.s-link.s-link__inherit{color:inherit}.td-underline{text-decoration:underline!important}div{display:block}p{clear:both;margin-bottom:1em;margin-top:0}input[type="submit"],input[type="button"],button,.button,.btn,[class*="btn-"],.hero-box.double-panel .panel.white .btn{background-color:transparent;border:1px solid transparent;border-radius:2px;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:inherit;font-weight:400;line-height:1;min-height:2.46153846em;outline:none;padding:.61538462em 1em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;transition:color .1s ease-in,background-color .1s ease-in,border-color .1s ease-in,box-shadow .1s ease-in;vertical-align:middle}svg:not(:root),symbol,image,marker,pattern,foreignObject{overflow:hidden}svg{width:14px;height:14px}.svg-icon{vertical-align:bottom;-moz-transform:rotate(360deg)}.s-btn .svg-icon{transition:opacity 200ms cubic-bezier(.165,.84,.44,1);margin:-.30769231em .15384615em -.15384615em -.53846154em}select,input,button,.button,a.button:link,.btn,[class*="btn-"],.hero-box.double-panel .panel.white .btn{background-color:#0095ff;border-color:#07c;box-shadow:inset 0 1px 0 #66bfff;color:#FFF}.svg-icon:not(.native) *{fill:currentColor}.s-btn{background-color:transparent;border:1px solid transparent;border-color:rgba(0,89,153,0);border-radius:2px;box-shadow:0 0 0 0 rgba(0,149,255,0);color:#07C;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:400;line-height:1.15384615;outline:none;padding:.8rem;position:relative}.s-btn,.s-btn:focus{background-color:rgba(0,119,204,0)}.s-btn,.s-btn:hover,.s-btn:focus,.s-btn.is-selected,.s-btn[disabled]{background-image:none}.s-btn__inverted{box-shadow:0 0 0 0 rgba(0,149,255,0);color:rgba(204,234,255,0.9)}.s-btn__inverted,.s-btn__inverted:focus{background-color:rgba(255,255,255,0)}.bg-black-700{background-color:#3b4045!important}.fc-white{color:#FFF!important}.baw0{border-width:0}.lh-lg{line-height:1.61538462!important}.ps-fixed{position:fixed}.r0{right:0}.b0{bottom:0!important}.l0{left:0}.grid{display:flex}.grid-center{align-items:center!important;justify-content:center!important}.p16{padding:16px!important}.gs8{margin:-4px}.mx-auto{margin-left:auto;margin-right:auto}.m0{margin:0}.mb-0{margin-bottom:0!important}.mt-10p{margin-top:10%}.ml-auto{margin-left:auto}.gsx,.gsx>.grid,.gsx>[class*="grid--cell"]{margin-bottom:0;margin-top:0}.gs8>.grid,.gs8>.grid--cell{margin:4px}.wmx10{max-width:81.025641rem!important}.z-banner{z-index:5000!important}.hidden{display:none!important}
</style>
</head>
<body>
<div class="mx-auto mt-10p">
<p>GDPR Compliance Implementation</p>
<p>
Have you agree with GDPR Compliance?
<span id="hasCompliedWith">NO</span>
</p>
<p id="disagreeWithGDPR">
Click here to disagree with GDPR
</p>
</div>
<div id="js-gdpr-consent-banner" class="p16 bg-black-700 fc-white ps-fixed b0 l0 r0 z-banner" role="banner" aria-hidden="false">
<div class="wmx10 mx-auto grid grid__center jc-spacebetween gs8 gsx" role="alertdialog" aria-describedby="notice-message">
<div class="grid--cell" aria-label="notice-message">
<p class="mb0 lh-lg">
This site uses cookies to deliver our services and to show you relevant ads and job listings.
By using our site, you acknowledge that you have read and understand our <a class="s-link s-link__inherit td-underline fc-white" target="_blank" href="https://stackoverflow.com/legal/cookie-policy">Cookie Policy</a>, <a class="s-link s-link__inherit td-underline fc-white" target="_blank" href="https://stackoverflow.com/legal/privacy-policy">Privacy Policy</a>, and our <a class="s-link s-link__inherit td-underline fc-white" target="_blank" href="https://stackoverflow.com/legal/terms-of-service/public">Terms of Service</a>.
Your use of Stack Overflow’s Products and Services, including the Stack Overflow Network, is subject to these policies and terms.
</p>
</div>
<div class="grid--cell ml-auto" aria-label="notice-dismiss">
<button class="s-btn s-btn__inverted fc-white bg-black-700 baw0 p16 js-notice-close" role="status" aria-hidden="true">
<svg aria-hidden="true" id="gdpr" class="svg-icon m0 iconClearSm" width="14" height="14" viewBox="0 0 14 14">
<path d="M12 3.41L10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7z"></path>
</svg>
</button>
</div>
</div>
</div>
<script type="text/javascript">
/*!
* JavaScript Cookie v2.2.0
* https://github.com/js-cookie/js-cookie
*
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
* Released under the MIT license
*/
!function(e){var n;if("function"==typeof define&&define.amd&&(define(e),n=!0),"object"==typeof exports&&(module.exports=e(),n=!0),!n){var t=window.Cookies,o=window.Cookies=e();o.noConflict=function(){return window.Cookies=t,o}}}(function(){function g(){for(var e=0,n={};e<arguments.length;e++){var t=arguments[e];for(var o in t)n[o]=t[o]}return n}return function e(l){function C(e,n,t){if("undefined"!=typeof document){if(1<arguments.length){"number"==typeof(t=g({path:"/"},C.defaults,t)).expires&&(t.expires=new Date(1*new Date+864e5*t.expires)),t.expires=t.expires?t.expires.toUTCString():"";try{var o=JSON.stringify(n);/^[\{\[]/.test(o)&&(n=o)}catch(e){}n=l.write?l.write(n,e):encodeURIComponent(String(n)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),e=encodeURIComponent(String(e)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var r="";for(var i in t)t[i]&&(r+="; "+i,!0!==t[i]&&(r+="="+t[i].split(";")[0]));return document.cookie=e+"="+n+r}for(var c={},f=function(e){return e.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)},a=document.cookie?document.cookie.split("; "):[],u=0;u<a.length;u++){var s=a[u].split("="),p=s.slice(1).join("=");this.json||'"'!==p.charAt(0)||(p=p.slice(1,-1));try{var d=f(s[0]);if(p=(l.read||l)(p,d)||f(p),this.json)try{p=JSON.parse(p)}catch(e){}if(c[d]=p,e===d)break}catch(e){}}return e?c[e]:c}}return(C.set=C).get=function(e){return C.call(C,e)},C.getJSON=function(e){return C.call({json:!0},e)},C.remove=function(e,n){C(e,"",g(n,{expires:-1}))},C.defaults={},C.withConverter=e,C}(function(){})});
window.onload = function(e) {
checkStatus();
document.getElementById( 'gdpr' ).onclick = function(e) {
Cookies.set( 'gdpr', '1' );
checkStatus();
}
document.querySelector( '#disagreeWithGDPR a' ).onclick = function(e) {
Cookies.remove( 'gdpr' );
checkStatus();
}
function checkStatus() {
if( typeof Cookies.get( 'gdpr' ) !== 'undefined' ) {
document.getElementById( 'hasCompliedWith' ).innerHTML = 'YES';
document.getElementById( 'js-gdpr-consent-banner' ).classList.add("hidden");
document.querySelector( '#disagreeWithGDPR' ).style.display = 'block';
} else {
document.getElementById( 'hasCompliedWith' ).innerHTML = 'NO';
document.getElementById( 'js-gdpr-consent-banner' ).classList.remove("hidden");
document.querySelector( '#disagreeWithGDPR' ).style.display = 'none';
}
}
}
</script>
</body>
</html>
I made some changes on my final version, notably to have two buttons, one to manifest the acceptance and another the declinal, instead of just one link to close the banner.
With this, I now register one single Cookie with a boolean-integer value, 1 (one) if the user has accepted the Terms — which was written and left available in a very visible place in the footer — or 0 (zero) if the User declined.
I opted for this format not only to demonstrate the User has a more fine control over the decisions but also to simplify the JS conditions.
But — and here comes the point of this discussion — how to apply this decision to mainly, but not limited to, Google Family Services?
It's so much information scattered across several pages that I honestly got lost, but still I managed to come up with this:
Google AdSense
<script>
(adsbygoogle=window.adsbygoogle||[]);
if( typeof cookie !== 'undefined' ) {
/**
* #internal
*
* Modifying the initialized Google AdSense Object in case the
* User didn't consent with GDPR
*/
if( cookie == '0' ) {
adsbygoogle.requestNonPersonalizedAds = 1;
}
} else {
/**
* #internal
*
* But if the consent Cookie doesn't even exist or if the User is still
* browsing ignoring the GDPR message in the bottom we'll pause the
* Ads Request in order to wait for the User to Consent for the first time
*/
adsbygoogle.pauseAdRequests = 1;
}
</script>
The cookie variable is already initialized in the <head> with the Cookie value
After initializing the AdSense variable, I test for the presence of my cookie and if it's not there — which means the GDPR banner will be visible — I make use of
Google Analytics' pauseAdRequests, which, as far as I understood, would not show any ads while the User doesn't consent to the Terms.
If my Cookie does exist, I then test its value and only if 0 (zero), I configure my AdSense with requestNonPersonalizedAds. I only know what that means in theory, as I haven't seen it in action yet.
Google Analytics
Google Analytics was, apparently, easier:
if( typeof cookie === 'undefined' || cookie == '0' ) {
window['ga-disable-UA-XXXXX-Y'] = true;
}
All I had to do was test the presence of my Cookie or if its value means the non-acceptance and in that case disable the tracking.
Other than that, I also configure it with the IP Anonymization. Because I'm not sure the impact that not having Users' IP Addresses would cause on my reports, it's there by default, opting-out or not.
Well, that sure was a long topic with all details I could come up with and all code I have so far — except the little difference I mentioned — so I believe now I can have a proper answer for this matter that's bothering me for so much time.
I am using R Shiny to develop a web page and also include my own R code.
I am using p5.js(https://p5js.org/) to display a game in the web page.
As in the official web page says I have an HTML and the p5 javascript code together with the javascript library. If I run the HTML, that is, clicking right and pressing chrome to display I get the started example (https://p5js.org/get-started/) with no incidence.
Here it is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<script language="javascript" type="text/javascript" src="libraries/p5.js"> </script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style> body {padding: 0; margin: 0;} </style>
</head>
<body>
</body>
</html>
When I do the same in Shiny, running the code from R-Studio I do not get anything from it. I have stored the javascript files in the www folder as it is supposed to be and I currently know that my HTML called the javascript since I set an alert in the p5 javascript file, but outside the setup and draw methods. The problem is that, even though the alert is loaded, seems like the setup and draw methods are not called and, obviously, as a consequence, they do not load the canvas. I know that they are not called because I have a called to an alert in the setup method that works running the HTML file directly but not if I run the same file from R-Studio.
Here it is the p5 javascript code:
alert("GOOD1");
function setup() {
alert("GOOD2");
createCanvas(640, 480);
}
function draw() {
if (mouseIsPressed) {fill(0);}
else {fill(255);}
ellipse(mouseX, mouseY, 80, 80);
}
I load the HTML page in Shiny using the next line of code
... ,tabItem(tabName = "tabProcessing", htmlOutput("processingMasterThesis") ...
Attach to the tag "processingMasterThesis" I have the corresponding URL to the HTML file in the server.R, as it is supposed to be so the problem is not here.
Why may be the cause of this? It works if I call the HTML file directly to be load in the browser but not if I do it from R-Studio, why?
I have solved the problem. The p5 java script code will be:
// =====================
// "app/sketch.js"
// =====================
var myCanvas;
function setup() {
var idCanvas = 'divCanvas';
myCanvas = createCanvas(300, 300);
myCanvas.parent(idCanvas);
}
function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
The library you need to run the example can be found at https://p5js.org/
In this javascript file I have created an id that reference a html div element so that is the place where I will set my canvas. Once this is done, the rest of the javascript code will code perfectly. The point is to reference that the parent of the canvas is that div as you can see in the code.
After this you just have to create either in shiny or pure html code something like this:
# THE UI (File ui.R)
library(shiny)
library(shinydashboard)
library(rmarkdown)
shinyUI(
fluidRow(
# THE UI
tags$html(
tags$body(
singleton(tags$head(tags$script(src = "master_thesis/app/libraries/p5.js")))
,singleton(tags$head(tags$script(src = "master_thesis/app/sketch.js")))
,singleton(tags$div(id = 'divCanvas', style = 'width:auto; height:auto'))
))
)
)
The code that I show below is in shiny. The first "head" line include the library p5.js and the second "head" line just say "hey this is my p5 script file" and "divCanvas will be the div that I will print on".
You may have issues with the references to the javascript file. I think is worthy to note that you must create a www folder in your root shiny application. In this folder, you must put your javascript files. For example, as you can see in my code the two javascript files that I am using follow the next path:
ShinyApplication/www/app/libraries/p5.js
ShinyApplication/www/app/sketch.js
Hope this can help!