I'm trying to build a markdown previewer using react and the marked node package. Everything works up to when I try to parse any markdown on the DOM. When I do I get an error message: Uncaught TypeError: marked is not a function.
I have marked declared at the top of the file like this:
import { useState } from "react";
import "./App.css";
const marked = require("marked");
I also tried declaring marked like this:
import { useState } from "react";
import "./App.css";
const { marked } = require("marked");
But this didn't seem make a difference.
This is my code configuration:
<div className="preview-label">Preview</div>
<div
id="preview"
className="preview-area"
dangerouslySetInnerHTML={{
__html: marked(mrkdwn),
}}
></div>
</div>
I've also tried:
<div className="preview-label">Preview</div>
<div
id="preview"
className="preview-area"
dangerouslySetInnerHTML={{
__html: marked.parse(mrkdwn),
}}
></div>
</div>
<div className="preview-label">Preview</div>
<div
id="preview"
className="preview-area"
dangerouslySetInnerHTML={{
__html: marked.parser(mrkdwn),
}}
></div>
</div>
and
<div className="preview-label">Preview</div>
<div
id="preview"
className="preview-area"
dangerouslySetInnerHTML={{
__html: marked.Parser(mrkdwn),
}}
></div>
</div>
However, I've also gotten similar error messages with these attempts as well, only in these cases the messages say .Parser, .parse, .parser, etc., is not a function.
If you need to see anymore code, please let me know.
I haven't been able to find a solution in any of my Googling. It's possible there's something out there I missed.
Any help would be greatly appreciated.
Thank you in advance.
I found that I'm supposed to import marked like this:
import { marked } from 'marked'
Related
I just want to know is there an issue with my code or just some alpine js functionality. Here is my code
<div class="d-flex flex-column ml-4" x-data={ data(); }>
<span class="d-flex flex-column">
<h4 class="font-weight-bold" x-text="price"></h4>
</span>
</div>
and my JS code
<script type="text/javascript">
function data()
{
return {
price: 50
}
}
</script>
The output doesn't print anything. But, if I change the line from
<h4 class="font-weight-bold" x-text="price"></h4>
to
<p class="font-weight-bold" x-text="price"></p>
then it works fine and I got the text 50 as output. Why is this happening? Is there anything wrong that I am doing?
I believe your x-data should be x-data="data()" so that { price: 50 } is the Alpine state.
See the following pen with that change https://codepen.io/hugodf/pen/BaLERbe.
<div class='productHolder'>
<a href="https://ap.com" class="tea-time-with-ap">
<div class="aptime-8" dataInfo="name">Hammer</div>
<div class="aptime-9" dataInfo="price">$980</div>
</div>
</div>
</a>
</div>
Note: there are over 20 productHolder classes on the same page.
I am able to get the price data, how can i used parent or preceding sibling to get the href.
I use the following code to get price:
rawPrice = response.xpath("//*[contains(text(),'$')]/text()")[counter].extract()
I've spent 2 hours trying to use preceding sibling, parent and even changing the code to use other values but, I run issues elsewhere.
Any help is appreciated, cheers!
Were you looking for something like:
from io import StringIO
from lxml import etree
html = """
<div class='productHolder'>
<a href="https://ap.com" class="tea-time-with-ap">
<div class="aptime-8" dataInfo="name">Hammer</div>
<div class="aptime-9" dataInfo="price">$980</div>
</div>
</div>
</a>
</div>
"""
root = etree.parse(StringIO(html), etree.HTMLParser())
print(root.xpath('//*[contains(text(),"$")]/../#href')[0])
Result:
https://ap.com
Of course you can easily build from this:
item = root.xpath('//*[contains(text(),"$")]')
print(item[0].text)
print(item[0].xpath('../#href')[0])
Result:
$980
https://ap.com
I am trying to build a very simple, tinder-like swiping application using Laravel Spark and vue2-touch-events. I assume I am doing something extraordinarily dumb, so I appreciate your insight.
I get this warning in my Vue inspector:
[Vue warn]: Property or method "swipeHandler" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Here is my simple version of all of the relevant code. I changed the v-touch:swipe to just longtap for testing.
/resources/js/app.js:
require('spark-bootstrap');
require('./components/bootstrap');
require('vue2-touch-events');
Vue.component('swipeHandler', './components/swipehandler.vue');
var app = new Vue({
mixins: [require('spark')],
components: {
vue2touchevents,
swipeHandler
},
});
swipe.blade.php:
#extends('spark::layouts.app')
#section('content')
<home :user="user" inline-template>
<div class="container">
<div class="row justify-content-center flex-column-reverse flex-md-row">
<div class="col-md-8">
<div class="card text-center">
<div class="card-header">
<div><i v-touch:longtap="swipeHandler">Swipe Here</i></div>
</div>
</div>
</div>
</div>
</div>
</home>
#endsection
/resources/js/components/swipehandler.vue:
<script>
export default {
methods: {
swipeHandler () {
alert("yay!");
console.log("yay!");
}
}
}
</script>
My Best guess is that you may want to try and add a template to your /resources/js/components/swipehandler.vue component:
<template>
<div>Yay</div>
</template>
<script>
export default {
methods: {
swipeHandler () {
alert("yay!");
console.log("yay!");
}
}
}
</script>
I'm not too familiar with how vue2-touch-events works, so I would need to understand that a bit more to give you a better answer.
Best of luck.
I am fairly new to Vue and currently am working on the first project with it.
I have encountered this problem which I cannot seem to find a solution for, I have "AuthPage.vue" component which has a slot for the message and default slot for content, once I put custom componen in my login.blade.php it should be prefilled in that slot but it says that custom element does not exist. If I replace slot inside .vue file with custom element it seems to be working perfectly. I am not sure what I am doing wrong.
AuthPage.vue
<template>
<div>
<div class="page-brand-info"></div>
<div class="page-login-main">
<img class="brand-img" src="/assets/global/images/logo.jpg">
<h3 class="font-size-24 text-center"><slot name="title"></slot></h3>
<slot name="message"></slot>
<slot></slot>
<footer class="page-copyright">
<p>© {{ moment().year() }}. All RIGHT RESERVED.</p>
</footer>
</div>
</div>
</template>
<script>
import LoginForm from './LoginForm.vue';
import ResetPasswordForm from './ResetPasswordForm.vue';
export default {
components: { LoginForm, ResetPasswordForm }
}
</script>
login.blade.php
#extends('backoffice.layout.auth')
#section('content')
<auth-page>
<template v-slot:title>Sign In</template>
<login-form></login-form>
</auth-page>
#endsection
Thank you for your help!
Eddie
You'll need to register the LoginForm component globally in order for it to be passed into the AuthPage component as a slot (when passed in directly from a view). This is because, outside the scope of your component, Vue doesn't know what <login-form> is.
Since you're using laravel, in your resources/js/app.js file add the following:
import LoginForm from './path/to/LoginForm.vue';
Vue.component('login-form', LoginForm);
I need to use Bootstrap Datepicker with Angular 2. So I created a component as follows
import {Component, ElementRef, OnInit} from '#angular/core';
declare var $: any;
#Component({
templateUrl: 'app/views/daily-reports.html'
})
export class DailyReportsComponent implements OnInit {
constructor(private elRef: ElementRef) {}
ngOnInit(): void {
$('#daily-reports').datetimepicker();
}
}
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='daily-reports'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
In my index.html file I have all the files needed - js libraries and css files but I get the error
TypeError: Cannot read property 'addClass' of undefined
When I try to use the same code without Angular I works correctly as usual. Is there a way to fix the problem or can anybody show me how to use this plugin in Angular2
You have to put that initialization in ngAfterViewInit, because the DOM is not rendered yet in ngOnInit, so the selector in your JQuery will not be found and thus return undefined.
ngAfterViewInit(): void {
$('#daily-reports').datetimepicker();
}
use declare var jQuery:any; then in ngAfterViewInit add:
jQuery(this.el.nativeElement).find('div[id="daily-reports"]').datetimepicker({format: 'LT'})