Browse Source

feat: add prismjs highlighting

pull/48/head
Inhji Y. 12 months ago
parent
commit
f8400c39a7
  1. 2
      apps/bookmarks/lib/bookmarks/bookmark.ex
  2. 20
      apps/tomie_web/assets/.babelrc
  3. 6
      apps/tomie_web/assets/css/app.css
  4. 79
      apps/tomie_web/assets/css/vendor/awesomeplete.css
  5. 170
      apps/tomie_web/assets/css/vendor/prismjs-dark.css
  6. 117
      apps/tomie_web/assets/css/vendor/prismjs-light.css
  7. 6
      apps/tomie_web/assets/js/app.js
  8. 58
      apps/tomie_web/assets/package-lock.json
  9. 5
      apps/tomie_web/assets/package.json
  10. 1
      apps/tomie_web/assets/postcss.config.js
  11. 2
      apps/tomie_web/lib/tomie_web/templates/bookmark/show.html.leex

2
apps/bookmarks/lib/bookmarks/bookmark.ex

@ -61,7 +61,7 @@ defmodule Bookmarks.Bookmark do
end
defp maybe_render_markdown(changeset, content) do
case Earmark.as_html(content) do
case Earmark.as_html(content, code_class_prefix: "language-") do
{:ok, html, _} ->
put_change(changeset, :content_html, html)

20
apps/tomie_web/assets/.babelrc

@ -3,6 +3,24 @@
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-proposal-export-default-from"
"@babel/plugin-proposal-export-default-from",
["prismjs", {
"languages": [
"javascript",
"css",
"markup",
"elixir",
"bash",
"nginx",
"http",
"json",
"markdown",
"regex",
"sql"
],
"plugins": ["line-numbers"],
"themes": ["funky"],
"css": true
}]
]
}

6
apps/tomie_web/assets/css/app.css

@ -6,6 +6,8 @@
/* Plugins */
@import "vendor/nprogress";
@import "vendor/prismjs-light";
@import "vendor/prismjs-dark";
/* Other */
@import "alerts";
@ -46,10 +48,6 @@ a {
content: "» "
}
.markdown pre {
@apply p-2 bg-on-surface-muted text-surface-muted;
}
/* General Styles */
.icon {

79
apps/tomie_web/assets/css/vendor/awesomeplete.css

@ -1,79 +0,0 @@
.awesomplete [hidden] {
display: none;
}
.awesomplete .visually-hidden {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.awesomplete {
display: block;
position: relative;
}
.awesomplete > input {
display: block;
}
.awesomplete > ul {
position: absolute;
left: 0;
z-index: 1;
min-width: 100%;
box-sizing: border-box;
list-style: none;
padding: 0;
margin: 0;
background: #fff;
}
.awesomplete > ul:empty {
display: none;
}
.awesomplete > ul {
@apply bg-surface;
}
@supports (transform: scale(0)) {
.awesomplete > ul {
transition: .3s cubic-bezier(.4,.2,.5,1.4);
transform-origin: 1.43em -.43em;
}
.awesomplete > ul[hidden],
.awesomplete > ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease;
}
}
.awesomplete > ul > li {
position: relative;
padding: .2em .5em;
cursor: pointer;
}
.awesomplete > ul > li:hover {
@apply text-on-surface bg-primary;
}
.awesomplete > ul > li[aria-selected="true"] {
@apply text-on-surface bg-primary;
}
.awesomplete mark {
background: hsl(65, 100%, 50%);
}
.awesomplete li:hover mark {
background: hsl(68, 100%, 41%);
}
.awesomplete li[aria-selected="true"] mark {
background: hsl(86, 100%, 21%);
color: inherit;
}

170
apps/tomie_web/assets/css/vendor/prismjs-dark.css

@ -0,0 +1,170 @@
/*
Name: Duotone Sea
Author: by Simurai, adapted from DuoTone themes by Simurai for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-sea-dark.css)
Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
*/
body[data-theme=dark] {
code[class*="language-"],
pre[class*="language-"] {
font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
background: #1d262f;
color: #57718e;
}
pre > code[class*="language-"] {
font-size: 1em;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #004a9e;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #004a9e;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
overflow: auto;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #4a5f78;
}
.token.punctuation {
color: #4a5f78;
}
.token.namespace {
opacity: .7;
}
.token.tag,
.token.operator,
.token.number {
color: #0aa370;
}
.token.property,
.token.function {
color: #57718e;
}
.token.tag-id,
.token.selector,
.token.atrule-id {
color: #ebf4ff;
}
code.language-javascript,
.token.attr-name {
color: #7eb6f6;
}
code.language-css,
code.language-scss,
.token.boolean,
.token.string,
.token.entity,
.token.url,
.language-css .token.string,
.language-scss .token.string,
.style .token.string,
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit,
.token.statement,
.token.regex,
.token.atrule {
color: #47ebb4;
}
.token.placeholder,
.token.variable {
color: #47ebb4;
}
.token.deleted {
text-decoration: line-through;
}
.token.inserted {
border-bottom: 1px dotted #ebf4ff;
text-decoration: none;
}
.token.italic {
font-style: italic;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.important {
color: #7eb6f6;
}
.token.entity {
cursor: help;
}
pre > code.highlight {
outline: .4em solid #34659d;
outline-offset: .4em;
}
/* overrides color-values for the Line Numbers plugin
* http://prismjs.com/plugins/line-numbers/
*/
.line-numbers .line-numbers-rows {
border-right-color: #1f2932;
}
.line-numbers-rows > span:before {
color: #2c3847;
}
/* overrides color-values for the Line Highlight plugin
* http://prismjs.com/plugins/line-highlight/
*/
.line-highlight {
background: rgba(10, 163, 112, 0.2);
background: -webkit-linear-gradient(left, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0));
background: linear-gradient(to right, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0));
}
}

117
apps/tomie_web/assets/css/vendor/prismjs-light.css

@ -0,0 +1,117 @@
/**
* GHColors theme by Avi Aryan (http://aviaryan.in)
* Inspired by Github syntax coloring
*/
code[class*="language-"],
pre[class*="language-"] {
color: #393A34;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre > code[class*="language-"] {
font-size: 1em;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
background: #b3d4fc;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
overflow: auto;
background-color: white;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .2em;
padding-top: 1px;
padding-bottom: 1px;
background: #f8f8f8;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999988;
font-style: italic;
}
.token.namespace {
opacity: .7;
}
.token.string,
.token.attr-value {
color: #e3116c;
}
.token.punctuation,
.token.operator {
color: #393A34; /* no highlight */
}
.token.entity,
.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.property,
.token.regex,
.token.inserted {
color: #36acaa;
}
.token.atrule,
.token.keyword,
.token.attr-name,
.language-autohotkey .token.selector {
color: #00a4db;
}
.token.function,
.token.deleted,
.language-autohotkey .token.tag {
color: #9a050f;
}
.token.tag,
.token.selector,
.language-autohotkey .token.keyword {
color: #00009f;
}
.token.important,
.token.function,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}

6
apps/tomie_web/assets/js/app.js

@ -8,6 +8,7 @@ import NProgress from "nprogress"
import {Socket} from "phoenix"
import LiveSocket from "phoenix_live_view"
import Listens from "./hooks/listens"
import Prism from 'prismjs';
// Live Socket
let Hooks = {
@ -40,4 +41,7 @@ toggleButton.addEventListener("click", function (e) {
NProgress.configure({ showSpinner: false })
window.addEventListener("phx:page-loading-start", info => NProgress.start())
window.addEventListener("phx:page-loading-stop", info => NProgress.done())
window.addEventListener("phx:page-loading-stop", info => {
Prism.highlightAll()
NProgress.done()
})

58
apps/tomie_web/assets/package-lock.json

@ -1451,6 +1451,12 @@
"object.assign": "^4.1.0"
}
},
"babel-plugin-prismjs": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/babel-plugin-prismjs/-/babel-plugin-prismjs-2.0.1.tgz",
"integrity": "sha512-GqQGa3xX3Z2ft97oDbGvEFoxD8nKqb3ZVszrOc5H7icnEUA56BIjVYm86hfZZA82uuHLwTIfCXbEKzKG1BzKzg==",
"dev": true
},
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@ -1924,6 +1930,18 @@
"integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
"dev": true
},
"clipboard": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
"integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
"dev": true,
"optional": true,
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"cliui": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@ -2517,6 +2535,13 @@
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
"integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
"dev": true,
"optional": true
},
"des.js": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@ -3791,6 +3816,16 @@
}
}
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"dev": true,
"optional": true,
"requires": {
"delegate": "^3.1.2"
}
},
"graceful-fs": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
@ -5980,6 +6015,15 @@
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE="
},
"prismjs": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.20.0.tgz",
"integrity": "sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==",
"dev": true,
"requires": {
"clipboard": "^2.0.0"
}
},
"private": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@ -6426,6 +6470,13 @@
"ajv-keywords": "^3.4.1"
}
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
"dev": true,
"optional": true
},
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@ -7233,6 +7284,13 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
"dev": true,
"optional": true
},
"to-arraybuffer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",

5
apps/tomie_web/assets/package.json

@ -12,7 +12,8 @@
"phoenix": "file:../../../deps/phoenix",
"phoenix_html": "file:../../../deps/phoenix_html",
"phoenix_live_view": "file:../../../deps/phoenix_live_view",
"tailwindcss": "^1.3.5"
"tailwindcss": "^1.3.5",
"prismjs": "^1.20.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
@ -20,12 +21,14 @@
"@babel/preset-env": "^7.9.5",
"@fullhuman/postcss-purgecss": "^2.1.2",
"babel-loader": "^8.0.0",
"babel-plugin-prismjs": "^2.0.1",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.5.3",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-nested": "^4.2.1",
"tailwindcss-theming": "^2.4.3",
"terser-webpack-plugin": "^2.3.6",
"webpack": "4.41.5",

1
apps/tomie_web/assets/postcss.config.js

@ -16,6 +16,7 @@ const purgecss = require("@fullhuman/postcss-purgecss")({
module.exports = {
plugins: [
require("postcss-import"),
require("postcss-nested"),
require("tailwindcss"),
require("autoprefixer"),
...(process.env.NODE_ENV === "production" ? [purgecss] : [])

2
apps/tomie_web/lib/tomie_web/templates/bookmark/show.html.leex

@ -46,7 +46,7 @@
<%= @bookmark.title || @bookmark.source %>
</h1>
<div class="markdown md:w-2/4 mb-4">
<div class="markdown">
<%= raw(@bookmark.content_html) %>
</div>

Loading…
Cancel
Save