Merge branch 'feature/homepage-syntax-highlighting' into 'dev'
Feature/homepage syntax highlighting See merge request ligolang/ligo!107
This commit is contained in:
commit
23c9aebf2e
@ -9,10 +9,88 @@ const React = require("react");
|
|||||||
|
|
||||||
const CompLibrary = require("../../core/CompLibrary.js");
|
const CompLibrary = require("../../core/CompLibrary.js");
|
||||||
|
|
||||||
|
const hljs = require("highlight.js");
|
||||||
|
|
||||||
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
|
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
|
||||||
const Container = CompLibrary.Container;
|
const Container = CompLibrary.Container;
|
||||||
const GridBlock = CompLibrary.GridBlock;
|
const GridBlock = CompLibrary.GridBlock;
|
||||||
|
|
||||||
|
function pascaligo(hljs) {
|
||||||
|
return {
|
||||||
|
// case_insensitive: true,
|
||||||
|
beginKeywords: '',
|
||||||
|
keywords: {
|
||||||
|
keyword: 'and begin block case const contains down else end fail for ' +
|
||||||
|
'from function if in is list map mod nil not of or patch ' +
|
||||||
|
'procedure record remove set skip step then to type var while with',
|
||||||
|
literal: 'true false unit int string some none bool nat list'
|
||||||
|
},
|
||||||
|
lexemes: '[a-zA-Z][a-zA-Z0-9_]*',
|
||||||
|
contains: [
|
||||||
|
hljs.C_LINE_COMMENT_MODE,
|
||||||
|
|
||||||
|
{
|
||||||
|
className: 'type',
|
||||||
|
begin: /[A-Z][a-z]+/
|
||||||
|
},
|
||||||
|
{
|
||||||
|
begin: /[*+-:;\(\)\{\}|\>\<]/,
|
||||||
|
// className: 'ignore'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
hljs.registerLanguage('pascaligo', pascaligo);
|
||||||
|
|
||||||
|
|
||||||
|
const pre = "```";
|
||||||
|
|
||||||
|
const pascaligoExample = `${pre}pascaligo
|
||||||
|
// variant defining pseudo multi-entrypoint actions
|
||||||
|
type action is
|
||||||
|
| Increment of int
|
||||||
|
| Decrement of int
|
||||||
|
|
||||||
|
function add (const a : int ; const b : int) : int is
|
||||||
|
block { skip } with a + b
|
||||||
|
|
||||||
|
function subtract (const a : int ; const b : int) : int is
|
||||||
|
block { skip } with a - b
|
||||||
|
|
||||||
|
// real entrypoint that re-routes the flow based
|
||||||
|
// on the action provided
|
||||||
|
function main (const p : action ; const s : int) :
|
||||||
|
(list(operation) * int) is
|
||||||
|
block { skip } with ((nil : list(operation)),
|
||||||
|
case p of
|
||||||
|
| Increment(n) -> add(s, n)
|
||||||
|
| Decrement(n) -> subtract(s, n)
|
||||||
|
end)
|
||||||
|
${pre}`;
|
||||||
|
|
||||||
|
const cameligoExample = `${pre}ocaml
|
||||||
|
type storage = int
|
||||||
|
|
||||||
|
(* variant defining pseudo multi-entrypoint actions *)
|
||||||
|
type action =
|
||||||
|
| Increment of int
|
||||||
|
| Decrement of int
|
||||||
|
|
||||||
|
let add (a: int) (b: int): int = a + b
|
||||||
|
|
||||||
|
let subtract (a: int) (b: int): int = a - b
|
||||||
|
|
||||||
|
(* real entrypoint that re-routes the flow based on
|
||||||
|
the action provided *)
|
||||||
|
let%entry main(p : action) storage =
|
||||||
|
let storage =
|
||||||
|
match p with
|
||||||
|
| Increment n -> add storage n
|
||||||
|
| Decrement n -> subtract storage n
|
||||||
|
in (([] : operation list), storage)
|
||||||
|
${pre}`;
|
||||||
|
|
||||||
const PascalLIGOTab = () => (
|
const PascalLIGOTab = () => (
|
||||||
<div
|
<div
|
||||||
id="tab-group-3-content-4"
|
id="tab-group-3-content-4"
|
||||||
@ -20,38 +98,7 @@ const PascalLIGOTab = () => (
|
|||||||
data-group="group_3"
|
data-group="group_3"
|
||||||
tabIndex="-1"
|
tabIndex="-1"
|
||||||
>
|
>
|
||||||
<div>
|
<MarkdownBlock>{pascaligoExample}</MarkdownBlock>
|
||||||
<span>
|
|
||||||
<pre>
|
|
||||||
<code className="hljs css language-Pascal">
|
|
||||||
// variant defining pseudo multi-entrypoint actions
|
|
||||||
<br />
|
|
||||||
type action is
|
|
||||||
<br />| Increment of int
|
|
||||||
<br />| Decrement of int
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
function add (const a : int ; const b : int) : int is
|
|
||||||
<br /> block {"{ skip }"} with a + b<br />
|
|
||||||
<br />
|
|
||||||
function subtract (const a : int ; const b : int) : int is
|
|
||||||
<br /> block {"{ skip }"} with a - b<br />
|
|
||||||
<br />
|
|
||||||
// real entrypoint that re-routes the flow based on the action
|
|
||||||
provided
|
|
||||||
<br />
|
|
||||||
function main (const p : action ; const s : int) : (list(operation)
|
|
||||||
* int) is
|
|
||||||
<br /> block {"{ skip }"} with ((nil : list(operation)),
|
|
||||||
<br /> case p of
|
|
||||||
<br /> | Increment(n) -> add(s, n)
|
|
||||||
<br /> | Decrement(n) -> subtract(s, n)
|
|
||||||
<br /> end)
|
|
||||||
<br />
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -62,33 +109,7 @@ const CamelLIGOTab = () => (
|
|||||||
data-group="group_3"
|
data-group="group_3"
|
||||||
tabIndex="-1"
|
tabIndex="-1"
|
||||||
>
|
>
|
||||||
<div>
|
<MarkdownBlock>{cameligoExample}</MarkdownBlock>
|
||||||
<pre>
|
|
||||||
<code className="hljs css language-Pascal">
|
|
||||||
type storage = int <br />
|
|
||||||
<br />
|
|
||||||
(* variant defining pseudo multi-entrypoint actions *) <br />
|
|
||||||
<br />
|
|
||||||
type action =<br />| Increment of int
|
|
||||||
<br />| Decrement of int
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
let add (a: int) (b: int) : int = a + b<br />
|
|
||||||
<br />
|
|
||||||
let subtract (a: int) (b: int) : int = a - b<br />
|
|
||||||
<br />
|
|
||||||
(* real entrypoint that re-routes the flow based on the action
|
|
||||||
provided *)
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
let%entry main (p : action) storage =<br /> let storage =<br /> match
|
|
||||||
p with
|
|
||||||
<br /> | Increment n -> add storage n<br /> | Decrement n -> subtract
|
|
||||||
storage n<br /> in (([] : operation list), storage)
|
|
||||||
<br />
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -319,7 +340,7 @@ class Index extends React.Component {
|
|||||||
<div className="partners-text">
|
<div className="partners-text">
|
||||||
<h3>Our Partners</h3>
|
<h3>Our Partners</h3>
|
||||||
<p className="body">
|
<p className="body">
|
||||||
We are not alone in this world -- here're some guys who support us
|
We are not alone in this world -- here're some people who support us
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -139,6 +139,10 @@ footnote {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fixedHeaderContainer {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-footer {
|
.nav-footer {
|
||||||
background: var(--color-primary-text);
|
background: var(--color-primary-text);
|
||||||
}
|
}
|
||||||
@ -184,11 +188,10 @@ footnote {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
padding: var(--padding-level-3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-text {
|
.home-text {
|
||||||
width: 35%;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sample-code-container {
|
.sample-code-container {
|
||||||
@ -256,6 +259,10 @@ blockquote {
|
|||||||
color: rgba(255, 255, 255, 1);
|
color: rgba(255, 255, 255, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tab-pane {
|
||||||
|
height: 550px;
|
||||||
|
}
|
||||||
|
|
||||||
blockquote code {
|
blockquote code {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
@ -323,6 +330,11 @@ html {
|
|||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 1500px;
|
||||||
|
}
|
||||||
|
|
||||||
.copyright a {
|
.copyright a {
|
||||||
color: #b2210c;
|
color: #b2210c;
|
||||||
}
|
}
|
||||||
@ -683,31 +695,105 @@ body
|
|||||||
|
|
||||||
@media only screen and (max-width: 1023px) {
|
@media only screen and (max-width: 1023px) {
|
||||||
.home-container {
|
.home-container {
|
||||||
flex-direction: column-reverse;
|
flex-direction: column;
|
||||||
margin-top: var(--padding-level-1);
|
|
||||||
}
|
|
||||||
.home-text {
|
|
||||||
align-content: center;
|
align-content: center;
|
||||||
text-align: center;
|
|
||||||
width: 90%;
|
|
||||||
padding-top: var(--padding-level-2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.home-text {
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--padding-level-2) 0;
|
||||||
|
}
|
||||||
|
|
||||||
.sample-code-container {
|
.sample-code-container {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sample-code {
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1280px) {
|
||||||
|
.home-container {
|
||||||
|
flex-direction: row;
|
||||||
|
margin: var(--padding-level-1);
|
||||||
|
max-width: 90%;
|
||||||
|
padding: var(--padding-level-3);
|
||||||
|
}
|
||||||
@media only screen and (max-width: 1023px) {
|
@media only screen and (max-width: 1023px) {
|
||||||
.reactNavSearchWrapper input#search_input_react {
|
.reactNavSearchWrapper input#search_input_react {
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 1440px) {
|
|
||||||
.landing h4.tagline-text {
|
.landing h4.tagline-text {
|
||||||
font-size: 2.25rem;
|
font-size: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sample-code-container {
|
||||||
|
max-width: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 1500px) {
|
.sample-code {
|
||||||
|
padding: 25px;
|
||||||
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* code highlights */
|
||||||
|
.hljs {
|
||||||
|
display:block;
|
||||||
|
overflow-x:hidden;
|
||||||
|
padding:.5em;
|
||||||
|
background:white;
|
||||||
|
color:black
|
||||||
|
}
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-quote,
|
||||||
|
.hljs-variable {
|
||||||
|
color:#008000
|
||||||
|
}
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-tag {
|
||||||
|
color:#00f
|
||||||
|
}
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-template-tag,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-type,
|
||||||
|
.hljs-addition {
|
||||||
|
color:#a31515
|
||||||
|
}
|
||||||
|
.hljs-deletion,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo,
|
||||||
|
.hljs-meta {
|
||||||
|
color:#2b91af
|
||||||
|
}
|
||||||
|
.hljs-doctag {
|
||||||
|
color:#808080
|
||||||
|
}
|
||||||
|
.hljs-attr {
|
||||||
|
color:#f00
|
||||||
|
}
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-link {
|
||||||
|
color:#00b0e8
|
||||||
|
}
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style:italic
|
||||||
|
}
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight:bold
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user