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 hljs = require("highlight.js");
|
||||
|
||||
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
|
||||
const Container = CompLibrary.Container;
|
||||
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 = () => (
|
||||
<div
|
||||
id="tab-group-3-content-4"
|
||||
@ -20,38 +98,7 @@ const PascalLIGOTab = () => (
|
||||
data-group="group_3"
|
||||
tabIndex="-1"
|
||||
>
|
||||
<div>
|
||||
<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>
|
||||
<MarkdownBlock>{pascaligoExample}</MarkdownBlock>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -62,33 +109,7 @@ const CamelLIGOTab = () => (
|
||||
data-group="group_3"
|
||||
tabIndex="-1"
|
||||
>
|
||||
<div>
|
||||
<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>
|
||||
<MarkdownBlock>{cameligoExample}</MarkdownBlock>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -134,7 +155,7 @@ class HomeSplash extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
|
||||
return (
|
||||
@ -319,7 +340,7 @@ class Index extends React.Component {
|
||||
<div className="partners-text">
|
||||
<h3>Our Partners</h3>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -139,6 +139,10 @@ footnote {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fixedHeaderContainer {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav-footer {
|
||||
background: var(--color-primary-text);
|
||||
}
|
||||
@ -184,11 +188,10 @@ footnote {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: var(--padding-level-3);
|
||||
}
|
||||
|
||||
.home-text {
|
||||
width: 35%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sample-code-container {
|
||||
@ -256,6 +259,10 @@ blockquote {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
blockquote code {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -323,6 +330,11 @@ html {
|
||||
background: white;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
max-width: 1500px;
|
||||
}
|
||||
|
||||
.copyright a {
|
||||
color: #b2210c;
|
||||
}
|
||||
@ -683,31 +695,105 @@ body
|
||||
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.home-container {
|
||||
flex-direction: column-reverse;
|
||||
margin-top: var(--padding-level-1);
|
||||
}
|
||||
.home-text {
|
||||
flex-direction: column;
|
||||
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 {
|
||||
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) {
|
||||
.reactNavSearchWrapper input#search_input_react {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1440px) {
|
||||
.landing h4.tagline-text {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.sample-code-container {
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.sample-code {
|
||||
padding: 25px;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1500px) {
|
||||
}
|
||||
|
||||
/* 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