Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #143 from omnivore-app/feature/code-highlighting

Browse Source 
Add code highlighting using highlight.js
This commit is contained in:
Jackson Harper
2022-02-26 17:29:58 -08:00
committed by GitHub
parent 61f182f730 fd39923907
commit da767bd55a
5 changed files with 41 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/api/package.json
View File

@ -72,6 +72,7 @@
"graphql": "^15.3.0",
"graphql-middleware": "^6.0.10",
"graphql-shield": "^7.5.0",
"highlightjs": "^9.16.2",
"intercom-client": "^2.11.0",
"jsdom": "^16.4.0",
"jsonwebtoken": "^8.5.1",
@ -100,6 +101,7 @@
"devDependencies": {
"@babel/register": "^7.14.5",
"@types/analytics-node": "^3.1.7",
"@types/highlightjs": "^9.12.2",
"@types/nanoid": "^3.0.0",
"@types/private-ip": "^1.0.0",
"chai": "^4.3.4",

21
packages/api/src/utils/parser.ts
View File

@ -12,6 +12,7 @@ import { WikipediaHandler } from './wikipedia-handler'
import { SubstackHandler } from './substack-handler'
import { AxiosHandler } from './axios-handler'
import { BloombergHandler } from './bloomberg-handler'
import * as hljs from 'highlightjs'
const logger = buildLogger('utils.parse')
@ -254,6 +255,26 @@ export const parsePreparedContent = async (
const jsonLdLinkMetadata = await getJSONLdLinkMetadata(window.document)
logRecord.JSONLdParsed = jsonLdLinkMetadata
if (article?.content) {
const cWindow = new JSDOM(article?.content).window
cWindow.document.querySelectorAll('code').forEach((e) => {
console.log(e.textContent)
if (e.textContent) {
const att = hljs.highlightAuto(e.textContent)
const code = window.document.createElement('code')
const langClass =
`hljs language-${att.language}` +
(att.second_best?.language
? ` language-${att.second_best?.language}`
: '')
code.setAttribute('class', langClass)
code.innerHTML = att.value
e.replaceWith(code)
}
})
article.content = cWindow.document.body.outerHTML
}
Object.assign(article, {
content: clean,
title: article?.title || jsonLdLinkMetadata.title,

9
packages/web/components/templates/article/Article.tsx
View File

@ -26,6 +26,8 @@ export type ArticleProps = {
}
export function Article(props: ArticleProps): JSX.Element {
const highlightTheme = isDarkTheme() ? 'dark' : 'default'
const [readingProgress, setReadingProgress] = useState(
props.initialReadingProgress || 0
)
@ -179,7 +181,9 @@ export function Article(props: ArticleProps): JSX.Element {
}, [onLoadImageHandler])
return (
<Box
<>
<link rel="stylesheet" href={`https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/${highlightTheme}.min.css`} />
<Box
ref={articleContentRef}
css={{
maxWidth: '100%',
@ -188,6 +192,7 @@ export function Article(props: ArticleProps): JSX.Element {
dangerouslySetInnerHTML={{
__html: props.content,
}}
/>
/>
</>
)
}

1
packages/web/pages/_document.tsx
View File

@ -53,6 +53,7 @@ export default class Document extends NextDocument {
<link rel="manifest" href="/manifest.webmanifest" />
<script async src="/static/scripts/intercom.js" />
<script async src="/static/scripts/inject-sw.js" />
<script async src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
</Head>
<body>
<Main />

10
yarn.lock
View File

@ -4364,6 +4364,11 @@
dependencies:
graphql "*"
"@types/highlightjs@^9.12.2":
version "9.12.2"
resolved "https://registry.yarnpkg.com/@types/highlightjs/-/highlightjs-9.12.2.tgz#6b6d460968a975f4ce3ab3907c03cde46a72a02f"
integrity sha512-oW2pEKwshxwBW1nVUizWQg/tnhboRtKrUKnF2hd6l4BZ0shr5ZjQ4ra/82+NEH6uWeM8JjrMGCux5enQXOQbTA==
"@types/hoist-non-react-statics@^3.3.1":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@ -9364,6 +9369,11 @@ highlight.js@^10.7.1:
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
highlightjs@^9.16.2:
version "9.16.2"
resolved "https://registry.yarnpkg.com/highlightjs/-/highlightjs-9.16.2.tgz#07ea6cc7c93340fc440734fb7abf28558f1f0fe1"
integrity sha512-FK1vmMj8BbEipEy8DLIvp71t5UsC7n2D6En/UfM/91PCwmOpj6f2iu0Y0coRC62KSRHHC+dquM2xMULV/X7NFg==
hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"