Я создал презентацию, используя зрелищный шаблон. GitHub зрелище Это все работает, как ожидалось. Проблема в том, что я пытаюсь использовать расширение для кодов слайдов для очков . Я включил файл призмы css, и код загружен и выделен. Однако я не могу пройтись по блокам кода, определенным в презентации. Я не могу стрелку вниз через определенные блоки.
Любая помощь с благодарностью.
// Import React
import React from 'react';
import CodeSlide from 'spectacle-code-slide';
import preloader from 'spectacle/lib/utils/preloader';
// Import Spectacle Core tags
import {
BlockQuote,
Cite,
Deck,
Heading,
Image,
List,
ListItem,
Notes,
Quote,
Slide,
Text
} from 'spectacle';
// Import theme
import createTheme from 'spectacle/lib/themes/default';
const images = {
formidagon: require('../assets/formidable-logo.svg'),
goodWork: require('../assets/good-work.gif'),
jobs: require('../assets/stevejobs.gif'),
library: require('../assets/library-dub.jpg'),
conference: require('../assets/conference.png'),
uxdx: require('../assets/uxdx.png'),
aws: require('../assets/aws.png'),
bbc: require('../assets/bbc.png'),
agile: require('../assets/agile.png'),
nix: require('../assets/nix.png')
};
preloader(images);
// Require CSS
require('normalize.css');
require('../themes/prism-atom-dark.css');
const theme = createTheme(
{
primary: 'black',
secondary: '#1F2022',
tertiary: '#03A9FC',
quaternary: '#CECECE',
quinterary: '#E07CE6'
},
{
primary: 'Montserrat',
secondary: 'Helvetica'
}
);
export default class Presentation extends React.Component {
render() {
return (
<Deck
theme={theme}
>
<Slide transition={['zoom']} bgColor="primary">
<Heading size={1} fit caps lineHeight={1} textColor="secondary">
UXDX
</Heading>
<Text margin="10px 0 0" textColor="tertiary" fit bold>
October 7 - 8, 2019
</Text>
<Text size={5} margin="10px 0 0" textColor="quinterary" bold>
Royal Dublin Society
</Text>
</Slide>
<Slide bgImage={images.library} bgLighten="0.5">
<Image src={images.jobs} width={500} />
</Slide>
<Slide transition={['fade']} bgColor="secondary" textColor="primary">
<BlockQuote>
<Quote>Sometimes life is going to hit you in the head with a brick. Don't lose faith.</Quote>
<Cite margin="10px 0 0 30px">Steve Jobs</Cite>
</BlockQuote>
</Slide>
<Slide bgImage={images.conference}>
</Slide>
<Slide bgImage={images.uxdx}>
</Slide>
<Slide bgImage={images.library} bgLighten="0.5">
<Image src={images.jobs} width={500} />
</Slide>
<Slide transition={['fade']} bgColor="secondary" textColor="primary">
<BlockQuote>
<Quote>It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them.</Quote>
<Cite margin="10px 0 0 30px">Steve Jobs</Cite>
</BlockQuote>
</Slide>
<Slide transition={[]} bgColor="primary" textColor="tertiary">
<Heading size={6} textColor="secondary" transition={['fade']} caps>
How long is a piece of string?: The key to solving the conundrum of software estimation
</Heading>
<List>
<ListItem>Estimation = Hard </ListItem>
<ListItem>#noestimates</ListItem>
<ListItem>Trust = Good</ListItem>
</List>
</Slide>
<Slide transition={['fade']} bgColor="tertiary">
<Heading size={6} textColor="primary" caps>
Typography
</Heading>
<Slide>
<div>
<Image src={images.nix} width={250} />
<Image src={images.aws} width={250} />
</div>
</Slide>
<Heading size={1} textColor="secondary">
Heading 1
</Heading>
</Slide>
<Slide>
<Image src={images.bbc} width={500} />
</Slide>
<Slide>
<Image src={images.agile} width={500} />
</Slide>
<Slide>
<Image src={images.duolingo} width={500} />
</Slide>
<Slide>
<CodeSlide
lang="js"
code={require('!raw-loader!../assets/code.js')}
overflow="overflow"
textSize=".6em"
ranges={[
{ loc: [0, 10], title: 'Walking through some code' },
{ loc: [0, 1], title: 'The Beginning' },
{ loc: [1, 2] },
{ loc: [1, 2], note: 'Heres a note!' },
{ loc: [2, 3] },
{ loc: [4, 7], title: 'images.stevejobs' },
{ loc: [8, 10] }]}
/>
</Slide>
</Deck>
);
}
}
Вот мой вывод при запуске сервера разработки. Не уверен, что расширение установлено правильно. Постараюсь повторить с нуля.
Listening at http://localhost:3000
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
webpack built 84507422d0bfe70c0b73 in 4869ms
ℹ ｢wdm｣: Hash: 84507422d0bfe70c0b73
Version: webpack 4.20.2
Time: 4869ms
Built at: 17/10/2019 07:27:04
Asset Size Chunks Chunk Names
bundle.js 9.4 MiB main [emitted] main
bundle.js.map 9.32 MiB main [emitted] main
Entrypoint main = bundle.js bundle.js.map
[0] multi @babel/polyfill webpack-hot-middleware/client react-hot-loader/patch ./index 64 bytes {main} [built]
[./index.js] 1.42 KiB {main} [built]
[./node_modules/@babel/polyfill/lib/index.js] 893 bytes {main} [built]
[./node_modules/core-js/es6/index.js] 5.74 KiB {main} [built]
[./node_modules/core-js/fn/array/includes.js] 109 bytes {main} [built]
[./node_modules/core-js/fn/object/entries.js] 109 bytes {main} [built]
[./node_modules/core-js/fn/object/get-own-property-descriptors.js] 148 bytes {main} [built]
[./node_modules/core-js/fn/object/values.js] 107 bytes {main} [built]
[./node_modules/core-js/fn/promise/finally.js] 166 bytes {main} [built]
[./node_modules/core-js/fn/string/pad-end.js] 108 bytes {main} [built]
[./node_modules/core-js/fn/string/pad-start.js] 112 bytes {main} [built]
[./node_modules/core-js/fn/symbol/async-iterator.js] 123 bytes {main} [built]
[./node_modules/core-js/web/index.js] 157 bytes {main} [built]
[./node_modules/react-hot-loader/patch.js] 228 bytes {main} [built]
[./node_modules/webpack-hot-middleware/client.js] (webpack)-hot-middleware/client.js 7.59 KiB {main} [built]
+ 1137 hidden modules
ℹ ｢wdm｣: Compiled successfully.