aboutsummaryrefslogtreecommitdiffstats
path: root/src/utils/helpers/prism.ts
blob: 86c8f7dc474da53cedafec65ec7d0fa8baac9f65 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import { t } from '@lingui/macro';

/**
 * Check if the current block has a defined language.
 * @param classList - A list of class.
 * @returns {boolean} - True if a class starts with "language-".
 */
const isLanguageBlock = (classList: DOMTokenList) => {
  const classes = Array.from(classList);
  return classes.some((className) => /language-.*/.test(className));
};

/**
 * Add automatically some classes and attributes for PrismJs.
 *
 * These classes and attributes are needed by Prism or to customize comments.
 */
export const addPrismClasses = () => {
  const preTags = document.getElementsByTagName('pre');

  Array.from(preTags).forEach((preTag) => {
    if (
      isLanguageBlock(preTag.classList) &&
      !preTag.classList.contains('command-line') &&
      !preTag.classList.contains('language-diff')
    ) {
      preTag.classList.add('line-numbers', 'match-braces');
    }

    if (
      preTag.classList.contains('command-line') &&
      preTag.classList.contains('filter-output')
    ) {
      preTag.setAttribute('data-filter-output', '#output#');
    }
  });
};

/**
 * Translate the PrismJS Copy to clipboard button.
 */
export const translateCopyButton = (locale: string) => {
  const articles = document.getElementsByTagName('article');

  Array.from(articles).forEach((article) => {
    article.setAttribute('lang', locale);
    article.setAttribute('data-prismjs-copy', t`Copy`);
    article.setAttribute('data-prismjs-copy-success', t`Copied!`);
    article.setAttribute('data-prismjs-copy-error', t`Use Ctrl+c to copy`);
  });
};
class="w"> 0.4s ease-out 0s; } &::before { width: 10%; height: 60%; position: relative; left: 30%; } &::after { width: 60%; height: 10%; position: relative; left: -5%; } } .body { width: 100%; margin: 0; overflow-y: auto; visibility: hidden; opacity: 0; height: 0; transition: all 0.5s ease-in-out 0s; &--borders { border: fun.convert-px(2) solid var(--color-primary-dark); } > *:last-child { margin-bottom: 0; } @include mix.media("screen") { @include mix.dimensions("md") { font-size: var(--font-size-sm); font-weight: 500; } } } .header { flex: 0 0 auto; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; gap: var(--spacing-md); width: 100%; min-height: var(--header-height); position: sticky; top: 0; background: var(--color-bg); border: none; border-bottom: fun.convert-px(2) solid var(--color-primary-dark); cursor: pointer; transition: background 0.2s ease-in-out 0s; > button { padding: 0 var(--spacing-xs); } } .wrapper--expanded .icon { &::before { height: 0; } } .header:hover, .header:focus { .icon { background: var(--color-primary-light); color: var(--color-fg-inverted); transform: scale(1.2); &::before, &::after { background: var(--color-bg); } } } .wrapper { --header-height: #{fun.convert-px(65)}; display: flex; flex-flow: column; min-height: var(--header-height); position: relative; overflow-y: hidden; &:first-of-type { .header { border-top: fun.convert-px(2) solid var(--color-primary-dark); } } } .wrapper--expanded { ~ .wrapper { .header { border-top: fun.convert-px(2) solid var(--color-primary-dark); } } .body { visibility: visible; opacity: 1; min-height: inherit; height: 100%; margin: var(--spacing-sm) 0; transition: all 0.45s ease-in-out 0s; } }